Web Interface Designing and Technologies (WDT) Lab Programs
1. Create an HTML document with the following formatting options:
(a)Bold, (b) Italics, (c) Underline, (d) Headings (Using H1 to H6 heading styles),
(e)Font (Type, Size and Color), (f) Background (Colored background/Image in
background), (g)Paragraph, (h) Line Break, (i) Horizontal Rule, (j) Pre tag
<!DOCTYPE html>
<html>
<head>
<title>HTML Formatting Example</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
background-image: url('[Link]'); /* Replace with a valid image URL */
background-size: cover;
color: #333;
padding: 20px;
}
.custom-font {
font-family: 'Courier New', monospace;
font-size: 20px;
color: blue;
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p><b>This text is bold</b></p>
<p><i>This text is italicized</i></p>
<p><u>This text is underlined</u></p>
<p class="custom-font">This text has a custom font style, size, and color.</p>
<p>This is a paragraph demonstrating normal text formatting.</p>
<p>First line.<br>Second line with a line break.</p>
<hr>
<pre>
This is preformatted text.
It preserves spaces and line breaks.
Code-like formatting.
</pre>
</body>
</html>
OUTPUT:
2. Create an HTML document which consists of:
(a) Ordered List (b) Unordered List (c) Nested List (d) Image
<html>
<head>
<title>HTML Lists and Image Example</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
color: #333;
padding: 20px;
}
</style>
</head>
<body>
<h1>Ordered List</h1>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<h1>Unordered List</h1>
<ul>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
<h1>Nested List</h1>
<ul>
<li>Category 1
<ul>
<li>Sub-item 1</li>
<li>Sub-item 2</li>
</ul>
</li>
<li>Category 2
<ul>
<li>Sub-item A</li>
<li>Sub-item B</li>
</ul>
</li>
</ul>
<h1>Image</h1>
<img src="[Link]" alt="Sample Image" width="300">
</body>
</html>
OUTPUT:
3. Create a Table with four rows and five columns. Place an image in one column.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Table with Image</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
color: #333;
padding: 20px;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
th, td {
border: 1px solid #000;
padding: 10px;
text-align: center;
}
img {
width: 50px;
height: auto;
}
</style>
</head>
<body>
<h1>HTML Table with Image</h1>
<table>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
</tr>
<tr>
<td>Row 1, Col 1</td>
<td>Row 1, Col 2</td>
<td>Row 1, Col 3</td>
<td>Row 1, Col 4</td>
<td><img src="[Link]" alt="Sample Image"></td>
</tr>
<tr>
<td>Row 2, Col 1</td>
<td>Row 2, Col 2</td>
<td>Row 2, Col 3</td>
<td>Row 2, Col 4</td>
<td><img src="[Link]" alt="Sample Image"></td>
</tr>
<tr>
<td>Row 3, Col 1</td>
<td>Row 3, Col 2</td>
<td>Row 3, Col 3</td>
<td>Row 3, Col 4</td>
<td><img src="[Link]" alt="Sample Image"></td>
</tr>
<tr>
<td>Row 4, Col 1</td>
<td>Row 4, Col 2</td>
<td>Row 4, Col 3</td>
<td>Row 4, Col 4</td>
<td><img src="[Link]" alt="Sample Image"></td>
</tr>
</table>
</body>
</html>
OUTPUT:
4. Using “table” tag, align the images as follows:
<!DOCTYPE html>
<html >
<head>
<title>Image Table Layout</title>
<style>
table {
width: 80%;
margin: auto;
border-collapse: collapse;
text-align: center;
}
td {
padding: 10px;
}
img {
width: 100px; /* Adjust size as needed */
height: auto;
}
.center-text {
font-size: 24px;
font-weight: bold;
text-align: center;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td><img src="[Link]" alt="Image 1"></td>
<td><img src="[Link]" alt="Image 2"></td>
<td><img src="[Link]" alt="Image 3"></td>
<td><img src="[Link]" alt="Image 4"></td>
</tr>
<tr>
<td><img src="[Link]" alt="Image 5"></td>
<td colspan="2" class="center-text">Buy <b>"Tweeties"</b> On-line</td>
<td><img src="[Link]" alt="Image 6"></td>
</tr>
<tr>
<td><img src="[Link]" alt="Image 7"></td>
<td><img src="[Link]" alt="Image 8"></td>
<td><img src="[Link]" alt="Image 9"></td>
<td><img src="[Link]" alt="Image 10"></td>
</tr>
</table>
</body>
</html>
OUTPUT:
5. Create a menu form using html.
<!DOCTYPE html>
<html>
<head>
<title>Menu Form</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
color: #333;
padding: 20px;
}
form {
background: #fff;
padding: 20px;
border-radius: 10px;
width: 300px;
margin: auto;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
label, select, input {
display: block;
width: 100%;
margin-bottom: 10px;
}
button {
background: blue;
color: white;
padding: 10px;
border: none;
cursor: pointer;
width: 100%;
}
button:hover {
background: darkblue;
}
</style>
</head>
<body>
<h1>Menu Form</h1>
<form action="#" method="post">
<label for="menu">Select a Menu Item:</label>
<select id="menu" name="menu">
<option value="pizza">Pizza</option>
<option value="burger">Burger</option>
<option value="pasta">Pasta</option>
<option value="salad">Salad</option>
</select>
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity" min="1" max="10">
<label for="comments">Additional Comments:</label>
<textarea id="comments" name="comments" rows="4"></textarea>
<button type="submit">Order Now</button>
</form>
</body>
</html>
OUTPUT:
6. Style the menu buttons using CSS.
<!DOCTYPE html>
<html>
<head>
<title>Menu Form</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
color: #333;
padding: 20px;
}
form {
background: #fff;
padding: 20px;
border-radius: 10px;
width: 300px;
margin: auto;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
label, select, input, textarea {
display: block;
width: 100%;
margin-bottom: 10px;
}
button {
background: linear-gradient(to right, #ff7e5f, #feb47b);
color: white;
padding: 12px;
border: none;
cursor: pointer;
width: 100%;
font-size: 16px;
border-radius: 5px;
transition: background 0.3s ease;
}
button:hover {
background: linear-gradient(to right, #feb47b, #ff7e5f);
}
</style>
</head>
<body>
<h1>Menu Form</h1>
<form action="#" method="post">
<label for="menu">Select a Menu Item:</label>
<select id="menu" name="menu">
<option value="pizza">Pizza</option>
<option value="burger">Burger</option>
<option value="pasta">Pasta</option>
<option value="salad">Salad</option>
</select>
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity" min="1" max="10">
<label for="comments">Additional Comments:</label>
<textarea id="comments" name="comments" rows="4"></textarea>
<button type="submit">Order Now</button>
</form>
</body>
</html>
OUTPUT:
7. Create a form using HTML which has the following types of controls:
(a) Text Box (b) Option/radio buttons (c) Check boxes (d) Reset and Submit buttons
<!DOCTYPE html>
<html>
<head>
<title>HTML Form with Controls</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
color: #333;
padding: 20px;
}
form {
background: #fff;
padding: 20px;
border-radius: 10px;
width: 300px;
margin: auto;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
label, input, textarea {
display: block;
width: 100%;
margin-bottom: 10px;
}
.radio-group, .checkbox-group {
margin-bottom: 10px;
}
button {
background: linear-gradient(to right, #ff7e5f, #feb47b);
color: white;
padding: 12px;
border: none;
cursor: pointer;
width: 100%;
font-size: 16px;
border-radius: 5px;
transition: background 0.3s ease;
}
button:hover {
background: linear-gradient(to right, #feb47b, #ff7e5f);
}
</style>
</head>
<body>
<h1>User Form</h1>
<form action="#" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<div class="radio-group">
<label>Gender:</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
</div>
<div class="checkbox-group">
<label>Interests:</label>
<input type="checkbox" id="sports" name="interests" value="sports">
<label for="sports">Sports</label>
<input type="checkbox" id="music" name="interests" value="music">
<label for="music">Music</label>
<input type="checkbox" id="reading" name="interests" value="reading">
<label for="reading">Reading</label>
</div>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</form>
</body>
</html>
OUTPUT:
8. Embed a calendar object in your web page.
<html>
<head>
<title>HTML Form with Controls</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
color: #333;
padding: 20px;
}
form {
background: #fff;
padding: 20px;
border-radius: 10px;
width: 300px;
margin: auto;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
label, input, textarea {
display: block;
width: 100%;
margin-bottom: 10px;
}
button {
background: linear-gradient(to right, #ff7e5f, #feb47b);
color: white;
padding: 12px;
border: none;
cursor: pointer;
width: 100%;
font-size: 16px;
border-radius: 5px;
transition: background 0.3s ease;
}
button:hover {
background: linear-gradient(to right, #feb47b, #ff7e5f);
}
</style>
</head>
<body>
<h1>User Form</h1>
<form action="#" method="post">
<table>
<tr><td colspan="2"> <label for="name">Name:</label>
<input type="text" id="name" name="name" required></td></tr>
<tr><td colspan="2"><label>Gender:</label></td></tr>
<tr><td><label for="male">Male</label></td><td><input type="radio" id="male"
name="gender" value="male"></td></tr>
<tr><td> <label for="female">Female</label></td><td><input type="radio" id="female"
name="gender" value="female"></td></tr>
<tr><td colspan="2"><label>Interests:</label></td></tr>
<tr><td><label for="sports">Sports</label></td><td><input type="checkbox" id="sports"
name="interests" value="sports"></td></tr>
<tr><td> <label for="music">Music</label></td><td><input type="checkbox" id="music"
name="interests" value="music"></td></tr>
<tr><td> <label for="reading">Reading</label></td><td> <input type="checkbox" id="reading"
name="interests" value="reading"></td></tr>
<tr><td><label for="dob">Select Date:</label></td><td><input type="date" id="dob"
name="dob"></td></tr>
<tr><td> <button type="submit">Submit</button></td><td> <button
type="reset">Reset</button></td></tr>
</table>
</form>
</body>
</html>
OUTPUT:
9. Create a form that accepts the information from the subscriber of a mailing system.
<!DOCTYPE html>
<html>
<head>
<title>Mailing List Subscription</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
color: #333;
padding: 20px;
}
form {
background: #fff;
padding: 20px;
border-radius: 10px;
width: 300px;
margin: auto;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
label, input {
display: block;
width: 100%;
margin-bottom: 10px;
}
button {
background: linear-gradient(to right, #ff7e5f, #feb47b);
color: white;
padding: 12px;
border: none;
cursor: pointer;
width: 100%;
font-size: 16px;
border-radius: 5px;
transition: background 0.3s ease;
}
button:hover {
background: linear-gradient(to right, #feb47b, #ff7e5f);
}
</style>
</head>
<body>
<h1>Subscribe to Our Mailing List</h1>
<form action="#" method="post">
<label for="name">Full Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email Address:</label>
<input type="email" id="email" name="email" required>
<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone">
<label for="preferences">Subscription Preferences:</label>
<select id="preferences" name="preferences">
<option value="daily">Daily Updates</option>
<option value="weekly">Weekly Newsletter</option>
<option value="monthly">Monthly Digest</option>
</select>
<button type="submit">Subscribe</button>
</form>
</body>
</html>
OUTPUT:
Word press:
10. Installation and configuration of word press
Installation and Configuration of WordPress
WordPress is a popular content management system (CMS) used for building websites and blogs.
Below is a step-by-step guide to installing and configuring WordPress on a local or live server.
1. System Requirements
Before installing WordPress, ensure your system meets the following requirements:
• Web Server: Apache, Nginx, or IIS
• Database: MySQL 5.7+ or MariaDB 10.3+
• PHP: 7.4 or higher
• SSL: Recommended for security
2. Download and Install WordPress
A. Installing on Localhost (XAMPP, WAMP, MAMP)
1. Download XAMPP/WAMP:
o XAMPP (Windows/Linux)
o WAMP (Windows)
o MAMP (Mac)
2. Install and Start Apache & MySQL
o Run XAMPP/WAMP and start Apache and MySQL services.
3. Download WordPress
o Visit [Link] and download the latest version.
o Extract the downloaded ZIP file into the htdocs (XAMPP) or www (WAMP) folder.
o Rename the extracted folder (e.g., mywebsite).
4. Create a Database
o Open phpMyAdmin ([Link]
o Click New and create a database (e.g., wordpress_db).
5. Run the WordPress Installer
o Open a browser and go to [Link]
o Select a language and click Continue.
o Enter the database details:
▪ Database Name: wordpress_db
▪ Username: root
▪ Password: (leave empty for XAMPP/WAMP)
▪ Database Host: localhost
o Click Submit and then Run the Installation.
6. Set Up WordPress
o Enter site title, admin username, password, and email.
o Click Install WordPress and log in at [Link]
B. Installing on a Live Server
1. Get a Domain and Hosting
o Purchase a domain and hosting from providers like Bluehost, SiteGround, or Hostinger.
2. Upload WordPress Files
o Download WordPress and extract it.
o Use cPanel → File Manager or FTP (FileZilla) to upload files to the public_html folder.
3. Create a MySQL Database
o Go to cPanel → MySQL Databases.
o Create a new database and note down the credentials.
4. Edit the [Link] File
o Rename [Link] to [Link].
o Edit the file and enter the database details:
o define('DB_NAME', 'your_database_name');
o define('DB_USER', 'your_database_user');
o define('DB_PASSWORD', 'your_database_password');
o define('DB_HOST', 'localhost');
o Save the file and upload it.
5. Run WordPress Installation
o Visit [Link] and complete the installation as in the localhost setup.
3. Basic WordPress Configuration
A. General Settings
• Go to Settings → General and configure:
o Site Title & Tagline
o URL Settings (http:// or [Link]
o Timezone & Date Format
B. Permalinks Setup
• Go to Settings → Permalinks and choose Post name ([Link]
C. Install a Theme
• Go to Appearance → Themes → Add New and choose a theme.
D. Install Plugins
• Go to Plugins → Add New and install essential plugins like:
o Yoast SEO (Search Engine Optimization)
o Elementor (Page Builder)
o Wordfence (Security)
o Contact Form 7 (Forms)
4. Securing WordPress
• Use SSL Certificate (HTTPS)
• Change Admin Username (avoid "admin")
• Enable Two-Factor Authentication (2FA)
• Regularly Update WordPress, Themes, and Plugins
5. Backup and Maintenance
• Install UpdraftPlus for regular backups.
• Enable automatic updates for security patches.
11. Access admin panel and manage posts
Accessing the WordPress Admin Panel and Managing Posts
Once WordPress is installed, you can manage your website using the WordPress Admin Panel. Below is
a step-by-step guide on how to log in and manage posts.
1. Accessing the Admin Panel
A. Login to WordPress Admin Dashboard
1. Open your browser and go to:
o Localhost: [Link]
o Live Website: [Link]
2. Enter your Username and Password (set during installation).
3. Click Log In to access the dashboard.
2. Managing Posts in WordPress
A. Creating a New Post
1. In the Admin Dashboard, go to Posts → Add New.
2. Enter a Title and Content in the WordPress editor.
3. Use the Block Editor (Gutenberg) or switch to the Classic Editor if needed.
4. You can:
o Format text (bold, italics, headings, lists).
o Add images/videos using the "Add Media" button.
o Insert links and buttons.
5. Assign a Category and Tags.
6. Click Publish to make it live or Save Draft for later editing.
B. Editing an Existing Post
1. Go to Posts → All Posts.
2. Hover over a post and click Edit.
3. Make necessary changes and click Update.
C. Deleting a Post
1. Go to Posts → All Posts.
2. Hover over a post and click Trash.
3. To permanently delete, go to Trash, hover over the post, and click Delete Permanently.
D. Managing Comments on Posts
1. Go to Comments in the dashboard.
2. Approve, reply, edit, or delete comments as needed.
E. Scheduling a Post
1. In the post editor, click on Publish settings.
2. Choose a future Date and Time.
3. Click Schedule to publish later.
F. Adding Featured Images
1. In the post editor, go to Featured Image on the right panel.
2. Click Set Featured Image and upload/select an image.
3. Click Publish/Update.
3. Additional Post Management Features
• Enable/Disable Comments under Discussion Settings.
• **Use
12. Access admin panel and manage pages
Accessing the WordPress Admin Panel and Managing Pages
In WordPress, Pages are different from Posts. Pages are used for static content like "About Us,"
"Contact," and "Privacy Policy," while posts are for blog content. Below is a step-by-step guide to
accessing and managing pages in WordPress.
1. Access the WordPress Admin Panel
A. Login to WordPress Dashboard
1. Open your web browser and go to:
o Localhost: [Link]
o Live Website: [Link]
2. Enter your Username and Password (set during installation).
3. Click Log In to access the WordPress dashboard.
2. Managing Pages in WordPress
A. Creating a New Page
1. In the Admin Dashboard, go to Pages → Add New.
2. Enter a Title (e.g., "About Us," "Services," "Contact").
3. Use the Block Editor (Gutenberg) or Classic Editor to add content.
4. You can:
o Format text (bold, italics, headings, lists).
o Add images/videos using the "Add Media" button.
o Insert buttons and links.
5. Click Publish to make the page live or Save Draft to edit later.
B. Editing an Existing Page
1. Go to Pages → All Pages.
2. Hover over the page you want to edit and click Edit.
3. Make necessary changes and click Update.
C. Deleting a Page
1. Go to Pages → All Pages.
2. Hover over a page and click Trash.
3. To permanently delete, go to Trash, hover over the page, and click Delete Permanently.
D. Setting a Page as Homepage
1. Go to Settings → Reading.
2. Under "Your homepage displays", select:
o "Your latest posts" (for a blog-style homepage).
o "A static page" (for a custom homepage).
3. Choose the page you want as the homepage.
4. Click Save Changes.
E. Adding a Page to the Menu
1. Go to Appearance → Menus.
2. Select the menu you want to edit (e.g., "Main Menu").
3. Check the page you want to add and click Add to Menu.
4. Drag and drop to arrange the order.
5. Click Save Menu.
F. Creating a Contact Page with a Form
1. Install Contact Form 7 or WPForms plugin.
2. Go to Pages → Add New and name it "Contact Us."
3. Paste the contact form shortcode into the page.
4. Click Publish.
G. Using Page Builders for Custom Layouts
For advanced designs, use plugins like:
• Elementor
• Beaver Builder
• Divi Builder
13. Add widgets and menus
Adding Widgets and Menus in WordPress
Widgets and menus help improve the navigation and functionality of your WordPress website. Below is
a step-by-step guide on how to add and manage them.
1. Adding Widgets in WordPress
Widgets allow you to add features like search bars, recent posts, social media links, and more to your
sidebar, footer, or other widget areas.
A. Access the Widget Section
1. Log in to your WordPress Admin Panel ([Link]
2. Go to Appearance → Widgets.
3. You'll see available widget areas (Sidebar, Footer, Header, etc.).
4. On the left, you'll see available widgets (Search, Recent Posts, Categories, etc.).
B. Add a Widget
1. Drag and drop a widget into a widget area (e.g., Sidebar or Footer).
2. Configure the widget settings (e.g., add a title, select categories).
3. Click Save.
C. Remove a Widget
1. Go to Appearance → Widgets.
2. Click the widget dropdown and then Delete.
D. Popular Widgets to Use
• Search Bar – Allows users to search content.
• Recent Posts – Displays recent blog posts.
• Categories – Lists post categories.
• Social Media Icons – Connects visitors to social profiles.
• Custom HTML – Allows adding custom code.
2. Adding Menus in WordPress
Menus help structure navigation, making it easy for visitors to explore your site.
A. Access the Menu Section
1. Go to Appearance → Menus.
2. Click Create a new menu and give it a name (e.g., "Main Menu").
3. Click Create Menu.
B. Add Items to the Menu
1. On the left panel, select items (Pages, Posts, Categories, Custom Links).
2. Click Add to Menu.
3. Drag and drop to rearrange menu items.
C. Set Menu Location
1. Scroll down to Menu Settings.
2. Select a location (Primary Menu, Footer Menu, Sidebar Menu).
3. Click Save Menu.
D. Creating a Dropdown (Nested) Menu
1. Drag a menu item slightly under and to the right of another item.
2. Click Save Menu.
14. Create users and assign roles
Creating Users and Assigning Roles in WordPress
WordPress allows you to create multiple users and assign different roles based on their permissions.
This is useful for managing website access for admins, editors, authors, and contributors.
1. Understanding WordPress User Roles
WordPress has six default user roles:
Role Capabilities
Administrator Full control over the site, including managing users, themes, plugins, and settings.
Editor Can publish, edit, and delete any posts and pages (including others' content).
Author Can publish, edit, and delete their own posts but not others'.
Contributor Can write and edit their own posts but cannot publish them.
Subscriber Can only manage their profile and leave comments.
Super Admin Available in multisite WordPress setups, manages multiple websites.
2. Adding a New User
1. Log in to WordPress Admin Panel ([Link]
2. Navigate to Users → Add New.
3. Fill in the following details:
o Username (Required)
o Email (Required)
o First Name & Last Name (Optional)
o Website (Optional)
o Password (Click "Generate Password" or create your own)
4. Assign a User Role (Administrator, Editor, Author, etc.).
5. Check "Send User Notification" (optional) to email login details to the user.
6. Click Add New User.
3. Editing or Deleting a User
1. Go to Users → All Users.
2. Click Edit under a user's name to modify their details or change their role.
3. Click Delete to remove the user permanently.
4. Changing a User’s Role
1. Navigate to Users → All Users.
2. Select the user(s) whose role you want to change.
3. Use the "Change role to…" dropdown menu and select a new role.
4. Click Change.
5. Managing User Permissions with Plugins
For more control over user roles, you can use plugins like:
• User Role Editor – Customize user roles and permissions.
• Members – Create custom roles and manage permissions.
15. Create a site and add a theme to it
Creating a WordPress Site and Adding a Theme
To build a fully functional WordPress website, follow these steps:
1. Setting Up a WordPress Site
A. Install WordPress (If Not Installed)
1. For Local Setup:
o Use XAMPP or WAMP to run a local server.
o Download WordPress from [Link].
o Extract files into the htdocs (XAMPP) or www (WAMP) folder.
o Create a database in phpMyAdmin and configure [Link].
o Run [Link] to install WordPress.
2. For Live Website:
o Buy hosting and domain (e.g., Bluehost, SiteGround, Hostinger).
o Install WordPress via cPanel or use a one-click WordPress installer.
o Set up an Admin Username and Password.
2. Installing and Adding a Theme
A. Choosing a WordPress Theme
1. Log in to WordPress Admin Panel ([Link]
2. Navigate to Appearance → Themes.
3. Click Add New.
4. Browse or search for a free theme (e.g., Astra, OceanWP, Neve, GeneratePress).
5. Click Install, then Activate.
B. Uploading a Custom Theme (.zip file)
If you have a premium theme from ThemeForest, TemplateMonster, etc.:
1. Go to Appearance → Themes → Add New.
2. Click Upload Theme → Choose File.
3. Select the .zip file and click Install Now.
4. Click Activate.
3. Customizing the Theme
1. Go to Appearance → Customize.
2. Modify the following:
o Site Identity (Logo, Site Title, Tagline).
o Colors & Fonts (Adjust theme colors and typography).
o Header & Footer (Adjust layouts).
o Homepage Settings (Choose a static page or latest posts).
3. Click Publish to save changes.
4. Installing Plugins for Extra Features
• Elementor – Drag & Drop Page Builder.
• Yoast SEO – SEO optimization.
• WooCommerce – For eCommerce stores.
• WPForms – Create contact forms.
• Smush – Optimize images.