Hello! Welcome to Wisephil. I have started to write this blog to share my experiences with using online tools. It is hoped that this will be a place for anyone to visit to learn about doing work online. After many trials and errors, I was able to succeed in solving some problems I encountered while working online. This blog will feature How TOs as well as Tips and Tricks. Above all, the tools that will be featured will be mostly from Open Source of have Free Plans. It will be a place for digital nomads, online creators, influencers, Product Ambassadors and people who choose to work from home. Or anyone who needs some ideas about online tools or working online.
Coding An HTML Newsletter
In this Tutorial, you wi l learn to write a Newsletter using HTML Code. You do not have to have any knowledge of HTML coding. You have three HTML code examples which you can use. You wil be using three free tools as wel.
Tools:
Online WYSIWYG Editor and HTML Converter
Step:1. Decide how you want to layout the Newsletter.
Step:2. Copy the folowing HTML code as an example.
Step:3. Go to WYSIWYG Editor.
Step:4. Paste the code you copied into the right-hand side of the editor.
Step:5. Look into the left-hand side of the editor.
Step:6. Write the Title of your Newsletter.
Step:7. Go to a News Article.
Step:8. Copy the Title of the story.
Step:9. Return to the WYSIWYG Editor.
Step:10. Paste the Title you copied into the left-hand side of the Editor.
Step:11. Return to the News Article.
Step:12. Copy a few lines of the first paragraph of the story if it is a long paragraph.
Step:13. Return to the WYSIWYG Editor.
Step:14. Paste the few lines of the first paragraph of the story you copied beneath the heading in the left hand side of the Editor.
Step:15. Return to the News Article then repeat the process until you fi l up the Newsletter.
Step:16. When you are done, copy al the HTML code from the right-hand side of the Editor.
Step:17. Go to https://hcodx.com.
Step:18. Click on 'New Project'.
Step:19. Delete the HTML Code that you see on the canvas.
Step:20. Paste the HTML code you copied for the Newsletter onto the canvas of this editor.
Step:21. Look on the 'Task bar' at the top of this editor then click on 'Format code'.
Step:22. You wi l now see a little box. Scrol to the bottom then click on 'Format'.
Step:23. Look in the bottom right-hand corner of the editor for a note that reads 'Code Formatted'.
Step:24. After you see that note, look on the 'Task bar' then click on 'Export Project'.
Step:25. A box wi l appear. Type a name for this file.
Step:26. Click on 'Export'.
Step:27. Look in the bottom right-hand corner of the editor for a note that reads 'HTML File Exported as...'
Step:28. Look in the 'Downloads' of your computer for the downloaded file.
Step:29. Click on 'Open file'.
Step:30. To transfer the file into a folder on your computer, look under 'Downloads' then click on the 'folder Icon'.
Step:31. After you transfer the file, look into the 'folder' then you can share it from there.
Step:32. Congratulations! You are done.
HTML Code Example 1.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<html lang="en">
<head>
<title>Email Newsletter</title>
</head>
<body>
<!-- Your content goes here -->
<header>
<!-- Header content here -->
</header>
<main>
</main>
<footer>
<!-- Footer content here -->
</footer>
<style>
/* Add your CSS styles here */
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}
</style>
<script>
// Write your JavaScript code here
console.log('He lo from JavaScript!');
</script>
</body>
</html>
HTML Code Example 2.
<p> </p>
<div class="container">
<div class="header">
<h1>Newsletter Title</h1>
</div>
<div class="content">
<p>Welcome to our newsletter!</p>
<img style="width: 100%;" src="newsletter.jpg" alt="Newsletter Image" /> <! -- Additional content --></div>
<div class="footer">
<p>Footer Content</p>
</div>
</div>
HTML Code Example 3.
<!DOCTYPE html>
<html>
<head>
<title>Email Newsletter</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1 class="title">Email Newsletter</h1>
<!-- Your content goes here -->
<header>
<!-- Header content here -->
</header>
<main>
<!-- Main content here -->
<!-- Main content here -->
<!-- Main content here -->
<!-- Main content here -->
<!-- Main content here -->
<!-- Main content here -->
<!-- Main content here -->
<!-- Main content here -->
<!-- Main content here -->
<!-- Main content here -->
<!-- Main content here -->
<!-- Main content here -->
</main>
<link rel="stylesheet" href="style.css" type="text/css" media="a l" />
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
header {
background-color: #007bff;
color: #ffffff;
padding: 20px;
text-align: center;
}
main {
padding: 20px;
}
footer {
background-color: #f2f2f2;
padding: 10px;
text-align: center;
}
</style>
<footer>
<!-- Footer content here -->
</footer>
<!-- Footer content here -->
</body>
</html>
Note:
You can use any of the three HTML code examples in this tutorial. You can get the Newsletter as a PDF, by copying and pasting the downloaded file onto a Blank PDF Page of a PDF editor. You can then share the Newsletter as a PDF. Folow the steps listed below.
Step:1. Go to https://www.2pdfconverter.com
Step:2. Scro l down the page.
Step:3. Look for 'Create PDF Document' then click on it.
Step:4. You will now see an 'Editor' with text, delete the text.
Step:5. Look at the top of the 'Editor'.
Step:6. Click on the little 'Down Arrow' next to 'Table'.
Step:7. Click again on 'Table'.
Step:8. Follow the little 'Black Arrow' pointing to the right-hand side of the next little box.
Step:9. Click on the first square.
Step:10. You will now see a row on the 'Editor'.
Step:11. Tap about four (4) or five (5) times on the 'Enter key' on your computer to make the row spacious.
Step:12. Copy the contents of your Newsletter by pressing Ctrl + C on the keyboard of tour computer.
Step:13. Paste the contents into the Row you have on the Editor.
Step:14. Scroll a bit to the bottom of the Editor.
Step:15. Look for 'Save as PDF' the click on it.
Step:16. To get the PDF copy, you can either click the download arrow in the left-hand corner of the Editor or on 'Download'.
Step:17. Look in the 'Downloads' of your computer for the downloaded file.
Step:18. Click on 'Open file'.
Step:19. To transfer the file into a folder on your computer, look in [Downloads' then click on the 'folder Icon'.
Step:20. You can upload and share the PDF version of your Newsletter from the 'Downloads' folder or from the 'Documents' folder on your computer. That depends on into which folder you choose to save it.
Tip:
Try not to save too many copies of your Newsletter onto your computer, Chromebook, nor tablet. Doing so wi l take up space on your device. Instead, use a USB or External Hard Drive for that purpose.
Written by W.Coward
Banner Advertisement Making
In this Tutorial you will learn to make Advertisements using two (2) freely available tools on the Internet. Also, you will learn how to apply your new skills to run Ad campaigns and get income.
Tools
Steps
Step:1. Open https://picsart.com
Step:2. Click on the three dots (...) at the top next to Fill.
Step:3. Choose a colour from the colour pallet. This will change the colour of the White Canvas.
Step:4. Click on the ‘Export’ button at the top right-hand corner of the Editor.
Step:5. Look in the ‘Downloads’ of your computer for the download.
Step:6. Click on ‘Open file’.
Step:7. You now have a JPG file. Click on the three dots (...) at the top of the Editor.
Step:8. Look for ‘Save as’ then click on it.
Step:9. This will open a new box that leads to ‘Pictures’ on your computer. Delete the text that you see.
Step:10. Rename the file.
Step:11. Click on ‘Save’.
Step:12. Open https://the-image-editor.com/image/editor
Step:13. Click on ‘Select Image’.
Step:14. Look into the box that appears then search for the file that you saved.
Step:15. Click on the file.
Step:16. Click on ‘Open’.
Step:17. Look at the bottom of the Editor then click on the Test Icon ‘T’.
Step:18. Place the Text Icon onto the Template then delete the text in it.
Step:19. Type the text that you want withing the text box.
Step:20. Use the Colour Icon to change the text colour.
Step:21. Use the Shape Icons to add shapes.
Step:22. Use the Arrow Icons to add arrows.
Step:23. Complete any further editing then click on the Download Arrow in the top Left-Hand Corner of the Editor.
Step:24. Look in the ‘Downloads’ of your computer then click on Open file.
Step:25. Rename and save the file that you now have.
Step:26. Congratulations! You can now upload your Ad to share on sites or onto your social media accounts.
Note: You can get added resources to use in your banner making from the following:
Place to get icons
Place to get Clipart
Compress JPGs
Tip:1. It is a good idea to always compress the finished JPG Ada that you make. This will make it easier to upload to some sites.
Tip:2. If you decide to make several JPG Ads, store them in a separate folder on your PC or on a USB. This will save space on your computer.
Tip:3.
Now that you can make Ads, it is time to get paid for your skills. Since you are a beginner, be an Affiliate Member of sites that sell products or become a Product Ambassador. Some sites will provide you with their advertising banners. Some may allow you the flexibility of creating your own promotional add then use your Affiliate Link to send visitors to their products.
Tip:4.
Join sites that run campaigns then choose products to promote. Use your skills to make creative Ads to attract sales. Go to mave.ly or clipster.gg then create an account. Confirm the email that you receive then search for campaigns that you would like to promote.
Tip:5. Create your Ads then place them onto reciprocal visit sites such as cashclicking or scalelup. Try to be active on these sites. The more ads you view, you will be getting more visitors to yours.
Tip:6.
After gaining experience in making Ads and attracting sales, you can then join popular sites such as Fiverr or Upwork.
In this Tutorial, you were able to use two freely available tools on the Internet to create Ads. You were also introduced to sites from where you can choose campaigns then run Ads. You were then introduced to sites where you can show the advertise the Ads you made. Also, you got added resources to use in your Ads making. Finally, you were given a few tips to keep your computer uncluttered from the Ads will make on it.
Finally, as full disclosure, some sites in this tutorial may contain affiliate links. As such, by clicking on them and joining, I may stand to earn cash.
Thank you,
Written by W.Coward
Comments