Mentored Fundraising Assignment 15 Homework Instructions
6-Month Mentored Nonprofit Fundraising Certificate Program
Center for Sustainable Development. https://nonprofit.csd-i.org/nonprofit-fundraising-training-certificate/

This week’s resources:
Class Home Page for Mentored Fundraising
Fundraising Assignment 15 Homework Instructions
Download the PDF Version of this AssignmentDownload ‘Fundraising Assignment Fifteen HTML code for the food bank landing page’

Discussion: This is a fairly technical assignment. Consequently, depending on your level of skill, it might simply be easier to ask an associate who is familiar with building webpages to help you do it. For those familiar developing webpages this is quite a simple assignment—and a draft webpage could probably be posted in 15 minutes. Idea: My suggestion is that after building the draft webpage, save it as a draft. In other words don’t click on the “publish” button. This is because when you click on “publish” it establishes a URL for that page [https://nonprofit.csd-i.org/subscribe-to-claremont-food-bank-news/]. There can be complications with changing a URL once it has been published, so stay in draft mode for now. In the next assignment, A16 we’re going to be working on fine tuning your keywords and on Search Engine Optimization: SEO. This will modify what you want your URL to say. When you’re done with A16—then you can publish your new webpage. I’m basing this assignment and the next assignment on using WordPress. It’s partially because 70 million people use WordPress, but also because there are so many learning resources available for WordPress. CSDi uses WordPress. We’ve discovered that the different platforms are very compatible. You can copy and paste between them and you can also import/export. The point here is that the directions below should work for your platform (if you’re not using WordPress) as well.

Assignment 15: Turning your MS Word landing page from assignments 13 and 14 into a real, live, webpage.
Create a master landing page template for replicable efficiency—and for developing material for completing your newsletter in A17.

Over the past two weeks we have been developing your new landing page for your new campaign. We’ve worked on developing keywords, writing a draft of the landing page, and then fine tuning the landing page.  

But all of this has been in Microsoft Word.  

This week will turn that Word document into a webpage. I will outline four ways to do this—two of them relatively simple, two a tad more complex.  

1. For those of you who are experienced in building webpages [or have a specialist who normally does this for you], go ahead and turn your Word document into a webpage.  

2. You can follow the steps just below to create a new blank webpage. If you want an example webpage to get started with, you can then open the example of my HTML version of the food bank webpage. Paste that code into your new blank webpage creating an editable template. You can then copy/paste the content from your Word document into this template.  

3. Or, you can make a copy an existing landing page that you already have that you are happy with. You can copy/paste the content from your Word document into this template.  

4. Or, you can follow the rest of the 10 steps just below in this assignment and learn how to build a webpage from scratch. If you haven’t had much experience in building a webpage from scratch, this could be a great learning opportunity. I present five optional ways of getting your Word document content into a webpage. Scan these ideas and pick the one that seems the best for you.  

If you don’t have a website, here is a free CSDi resource that will show you how to build one: The Beginner’s Guide to Online Donations.

You need to continue working on several things. Your landing page should be well written and organized through the use of the template you created in assignments 13 and 14 . Your landing page should have a compelling call to action related to your readers’ interests. You should have a design you like and develop a master landing page template. You should be able to copy and paste from the landing page certain predefined sections or sentences, into specific locations on your newsletter. This will do several things: 1. It will tremendously speed up the process of assembling your newsletter. 2. It will give the newsletter a professional, comfortable look and feel which subscribers come to expect and enjoy. 3. It will make sure that you are getting the compelling portions of the landing page into the newsletter so that people want to click through and read the landing page.

Because participants of this training program have different levels of website experience I’m going to post techniques just below from the standpoint of working with an absolute beginner. However, that said, those of you with more experience should scan this because there may be some good ideas for you as well. Be forewarned! This is a very thorough summary of how to build a webpage from scratch. Enjoy!  

Step 1. Logon to your website.   From your dashboard, click on ‘Pages’ and then click on ‘Add New.’ Let’s say that you’re going to write a webpage on your food bank newsletter.  

Step 2. Type ‘Subscribe to Food Bank News’ into the page’s title cell.  

Off on the upper right, click on ‘Save Draft.’ Do not click on ‘Publish.’  

  You will get a new page without content called “Subscribe to Food Bank News.”  

Your Tree View will show this:

So now, you have a new draft version of a blank page called ‘Subscribe to Food Bank News’ ready to past in content.  

Creating a Landing Page Template.
This week we’re going to create a very simple web page—just so you can see how to do it.  

We started this process in Microsoft Word where you can write your copy, add images, and organize and format the look and feel of the page.  

So here’s a very simple annotated (in red) landing page written in Word:

The simple template has:

• a landing page headline
• a landing page sub headline
• an offer
• a call to action
• an image
• introductory content
• benefits: what you will get out of the program
• features: what you will do
• social proof: credibility
• more information

How to transfer content from your Word document to your webpage: Five ways to add written compelling content—plus adding photos and links.  

There are essentially five ways to add content to a webpage. Try them out and choose the one best for you:

1. Open a new page or post, open the visual editor and write just like in Word. All your tools are there.
2. Copy/pasting from Word, editing and formatting in the Visual editor (kind of like working in Word).
3. Word: converting Word documents into HTML documents for pasting into a new page.
4. Templates: copying an existing page that you like and then editing it to become a new page.
5. Copy/pasting blocks of text you like from HTML pages into new pages.

I personally use the last two. I almost never do anything from scratch. I either copy one post that I like and rewrite a few things, or I copy several things from several posts that I like and paste them into a new document. The clincher here, however, is that this is by and large done in HTML.  

I’m going to show you several examples so you can see the whole process and decide which one might be best for you.  

For my first example I’m going to open up the document we created and simply start typing.  

Option 1. Typing directly into the Visual Editor. This is the best and quickest wayfor a beginner to get their web site up and running immediately. Open up your webpage or blog that you created. On the right, just above the area where you will paste in content, click on ‘Visual.’ Start typing! It is very much like working in Word. All of the same types of formatting tools exist.  

For the example below, I simply typed in to the visual editor. I clicked on ‘Add Media’ to add photos from my media storage. Then I made the annotations red and bolded them. And then I added bullets to the lists.  

On the right you have what it looked like after I typed the text into the Visual editor and made my formatting changes, and on the left you have the finished page. Just below this illustration I have pasted in an example of what the original Word document looked like. Pretty good, huh?

  Here is my original Word document. Pretty close match. Bear in mind that all webpages will change the formatting a little:

Option 2. Copy/pasting your Word Document right into the visual editor. This may be a solution for those of us hooked on Word.

Open up your webpage that you created. On the right, just above the area where you will paste in content, click on ‘Visual.’  

Open your Word document (like the one above, select it all (ctrl a), copy it (ctrl c) and paste it into the blank space in the Visual editor (ctrl v). Edit and format the new page in the Visual editor.  

Click ‘Save Draft.’  Looking at the example below, you essentially have all of the text, much of it is bold where it should be bold, and you even have some bullets. However, the line spacing is erratic and you’re missing images.

Easy to Fix: Click on the edit page tab again to go back to the Visual editor. WordPress calls this ‘Visual’, the rest the world calls it WYSIWYG (What you See is what You Get). You can place your cursor within the text and change things—you can change spellings reduce line spacings, bold things, add bullets, add images. You can pretty much do whatever it is that you can do in Microsoft Word.  

If you are a real beginner, this is an opportunity to work between a Word document and your webpage in a very simple manner. You will just need to clean up what you pasted in until it looks like what you had hoped for.  

Be sure that you save this as a draft until you’re absolutely ready to publish.  

Option 3. Converting Word documents into HTML documents for pasting into a new page. There are programs on the Internet where you can paste the word document into a blank page and it will convert it to an HTML document.

Personal Note: I have been using Word for so many years that it is hard to break the habit: I’m comfortable using it. Plus I have a cache of Word documents that I can borrow from. So this option is a useful one for me.

Tech Tools: Programs that you can use to do this:
Adobe Dreamweaver (pictured below)   Let’s see what Dreamweaver looks like:

There’s my Word document pasted in on the right and the new HTML conversion on the left.  

I simply opened up ‘Subscribe to Food Bank News’ in the edit mode and clicked on ‘Text’ and then coppied the HTML above and pasted it into the Text editor.  

Windows Live Writer: Free. Very popular but no longer fully supported by Microsoft. However it is still available here:
https://www.microsoft.com/en-us/download/details.aspx?id=8621

Open Live Writer: a free, open source version of a well-loved but not actively maintained Microsoft Product: Windows Live Writer:
http://openlivewriter.org/  

Open Live Writer is like Word for your blog. Open Live Writer is a powerful, lightweight blog editor that allows you to create blog posts, add photos and videos then publish to your website. You can also compose blogs posts offline and then publish on your return. Open Live Writer works with many popular blog service providers such as WordPress, Blogger, TypePad, Moveable Type, DasBlog and many more.  

Google search:
“best microsoft word html conversion”
https://www.google.com/?gws_rd=ssl#q=best+microsoft+word+html+conversion This search brought up some quickie right-on-the-screen conversion tools:
https://word2cleanhtml.com/
https://html-cleaner.com/doc-to-html/
https://wordtohtml.net/
https://wordhtml.com/

There is also a WordPress Plugin: Mammoth.docx converter. 2,000 downloads and 5 stars in reviews.
https://wordpress.org/plugins/mammoth-docx-converter/

Tech Tool: No sidebar in this version of the webpage. I decided that I wanted to show you what the page looked like without a sidebar. On the right I clicked on ‘Template’ then ‘Builder Template’ than in the upper right I clicked on ‘Columns.’

Then in the upper left I clicked on the sprocket and selected one column. Then I pasted in my HTML. This gave me one wide column without a sidebar.

  I saved it as a draft and then clicked on ‘Preview This Page’ and this is what I got:

You can see right away that the line spacings and formatting more closely resembles the Word document. It’s still going to take some work. For example the images are missing. However, in the HTML editing page, it shows where to place the images—so that sort of speeds things up.  

Without the sidebar, longer sentences don’t wrap around—they have more room. This is especially nice for bulleted lists.  

Option 4. Templates: copying an existing page that you like and then editing it to become a new page. Once I get this Subscription page cleaned up, I can use it over and over again as a template. I can just create a new page. Open both this (template) page and the brand-new page in separate tabs. In the editing mode I can select ‘Text’ for both of them, I can copy the HTML from the Template page and past it into the brand-new page. I can then save the brand-new page as a draft.  

I can now open that brand-new page in either the ‘Visual’ or ‘Text’ mode and do my editing. In Visual Edit, just like in Option 1 you can do all of your editing and formatting just like a Word document. In the text edit mode you do your formatting within the HTML code.

Personal note: Many, many people manage successful blogs and websites completely from the Visual editor. A year from now, after you have mastered your website, consider exploring the HTML that you can see in your Text editor. HTML gives you exacting control over a webpage—both in the look and feel, but also in what you can do with a webpage. Embedding volunteer forms, donations, videos, and cutting and pasting between newsletter and blog suddenly become easier and faster. Options 4 & 5 illustrate some of the efficiency gains available when using HTML.

Option 5. Copy/pasting blocks of text from HTML pages into new pages. In a similar fashion I can find a section of an older document that I like. It might be the way that a photograph lines up with some text or it might be a bulleted list. I can then open up a new document and the older document—both of them in text edit mode and simply copy the paragraph’s HTML code from one into the other.  

I can borrow paragraphs of HTML code from two or three other documents as well—and place those into the new document—and then save it in draft mode. Now I’ll have a document with some of the best components of several pages that I can then go and edit the content in Visual edit mode or in Text edit mode.  

You can see how when placed side-by-side, the finished webpage on the left lines up almost perfectly with the HTML on the right. You can read “non-profit training catalog” in both places. So I can simply copy from the HTML beginning with “nonprofit training catalog” down to just above “nonprofit professionals”, and paste that into another page and get the look of that numbered list.  

HOW TO ADD PHOTOS

Uploading an image into Media Library.Choose a photo from your collection on your computer for your first webpage or blog post. From your Dashboard, click on Media Library , and then click on ‘Add New’ in the upper left. Click on ‘Select Files’ and you will be taken to where your files are stored on your computer. Navigate through your files and find the image for your first webpage. Click on it, click on ‘open’, and your file will be uploaded to Media Library.

Inserting a photo into your new webpage.. Return to your new webpage in Visual editor mode. Place your cursor in the webpage where you would like to add an image. Click on ‘Add Media’ and you will be taken to your collection of images. Click on the image that you want to insert—and then click on ‘Insert into page’ in the lower right corner. The new image will be inserted where your cursor had been placed. Click on save draft and you’re done.  

How to add links. It’s possible with a brand-new website that you don’t have pages to link to yet: All that you have is your first webpage that we’ve just posted. I’m going to suggest that we quickly look for an interesting article on food banks on the Internet, and we can link to that.  

The Claremont Food Bank is forming a partnership with ‘Move for Hunger’ which collects non-perishable food items from families that are moving—and redistributes them to food banks across the country. We feel that our new partnership with Move for Hunger would make a good newsletter article. So let’s link to them.  

Open your new page in the Visual editor.  

I added this sentence to my new Food Bank Subscription page:
“Read about our new partnership with Move for Hunger in this month’s newsletter. Move for Hunger collects canned goods from families that are moving and redistributes it to food banks like ours across the country.”  

I went to their website and copied their url:
https://moveforhunger.org/  

I then selected ‘Move for Hunger’ in the Visual editor with my cursor. I clicked on the link symbol (Looks like a chain link in the tool bar. It is highlighted in black in the illustration below.). A cell opens up to paste in the link—which I did—and I clicked on the ‘Apply’ arrow.  

Move for Hunger is now a live link.  

Click on ‘Save Draft’ and then right-click on ‘Preview Page’ in the upper left. When the revised page opens, click on Move for Hunger and you will be sent to their website.  

Just to sum up.
The best option for a beginner is to open up the visual editor in a new page and simply begin typing in your information. You can then format the text and add images.  

You can also paste from a Word document right into the visual editor of WordPress. It will need a little cleanup—but it’s simple to do.  

For Word lovers, a Word to HTML converter provides clean HTML code that you can paste into your Text editor in WordPress and gives the best looking version quickly. It will still need a little cleaning up like adding images.  

What I probably do more than anything else is to develop a few ‘master’ pages as templates. If it closely resembles a new page that I want to write, I simply copy the HTML from the template, and paste it into the Text editor of the new page. I can then shift over to the Visual editor or Text editor to make changes.  

You don’t need to be a professional coder to benefit by using HTML. If you can read your text in a block of code, you can copy a block of text that might have illustrations laid out in a way that you like or to lists laid out in a way that you like, paste it into a new document and edit it like Word in the Visual editor.  

Here are two bonuses:
Bonus 1:Guide to Snippets. 4 must-have copy/paste webpage HTML snippets for tables, bullets and indented paragraphs.  

This may be a little advanced, but we just talked about copying HTML paragraphs and pasting them into a new webpage to duplicate an effect. This isn’t any more complicated.  

Bulleted Lists.   Here are several kinds of bulleted lists.
Square Bullets. You can Google different shapes of bullets and just substitute their name for the term ‘square.’ This is called an ‘unordered list’ hence the ‘ul’ below.  

Here is the HTML code in case you want to copy it and use it:
<div>Choose from these Four Nonprofit Certificate Programs:</div>
<div>
<ul type=”square”>
<li>Nonprofit Marketing & Communications Certificate</li>
<li>Nonprofit Program Fundraising</li> <li>100 Day Coaching Program</li>
<li>Live Workshop Training Programs</li>
</ul>
</div>  

Tight Bullets. You’ll notice that the bullets above have a space between the heading and the bullets. These tight bullets alleviate that. It’s great for tight spaces—such as a sidebar or a list of newsletters.  

Here is the HTML code in case you want to copy it and use it:
<div>Join 15,000 subscribers</div>
<div>RECEIVE INFORMATION ON:<br />&bull; non profit project ideas<br />&bull; solutions: community challenges<br />&bull; project design &amp; management<br />&bull; project tools &amp; resources<br />&bull; case studies from the field</div>  

Ordered Lists.
An ordered list is exactly like an unordered list except you use an ‘ol’ rather than a ‘ul.’ This gives you a number list (ordered).  

Here is the HTML code in case you want to copy it and use it:
<div>This program will lead you in developing a winning, impact oriented project and help you:</div>
<div><ol>
<li><span>Determine who your potential new donors are.</span></li>
<li><span>Clearly articulate need and outline activities for solving the challenges.</span></li>
<li><span>Show individual donors the ‘why’ behind your request for a donation.</span></li>
<li>Develop documentation to support your project such as budgets and fact sheets.</li>
<li>Carefully compare project design to donor interest.</li>
<li>Capture donor imagination with improved communications.</li>
<li><span>Enjoy increased funding for your program services.</span>/li>
</ol></div>  

A Simple Table: Photo on the left and text on the right.  

Here is the HTML code in case you want to copy it and use it:
<table style=”padding-left: 0px;” border=”0″ cellspacing=”2″ cellpadding=”0″>
<tbody>
<tr>
<td><span class=”full-image-block ssNonEditable” ><span><img src=”https://nonprofit.csd-i.org/wp-content/uploads/Photos/Barata-Abkhazia-Meeting.jpg” alt=”How to Make a Website Google Will Love: Fundraising Step 2.” /></span></span></td>
<td align=”left” valign=”top” width=”90%”><div><strong>Increase Online Donations in 10 Weeks</strong><br />Follow 10 weekly steps: set up a modern website and launch a communications program to attract donors.</div></td>
</tr>
</tbody>
</table>  

Indented Paragraphs. Sometimes a paragraph—or a quotation—gets special attention when it is indented.  

Here is the HTML code in case you want to copy it and use it:
<div style=”margin-left: 20px;”>CSDi is releasing a new nonprofit book on online fundraising in September. We’re offering newsletter subscribers a full preview in 14, weekly, action-oriented chapters. See what the 14 weekly installments include. Take advantage of this opportunity: Subscribe now!</div>  

Bonus 2:Guide:
A Pre-Publish Checklist. Final page edit. Checking spelling, grammar and links.  

Never enough time, and always in a hurry. There is that continuing temptation to push a new webpage’s ‘Publish’ button and be able to cross that project off of your list.  

Wait! Don’t do it yet! Typically whether you post a new page today or tomorrow isn’t going to make that much of a difference.  

A simple checklist can help with this dilemma.  

How? Although today the idea is to make sure that your new page is indeed ready to publish—we will be focusing more on things like spell checks, double checking links, and making sure that we completed our Yoast Simple SEO activities [in A 16].  

CHECKLIST
COPY
1. Read through copy and double check that it makes sense. Does the information flow in a logical fashion?
2. Does the final page content fulfill the goals that you had set out for your organization?
3. Have a colleague read through the copy and make sure that it makes sense. Does the information flow in a logical fashion? 4. Does your colleague feel that the final page content fulfill the goals that you had set out for your organization?
5. Are the photos relevant—and the images in focus?
6. Is the content relevant to your readers interests? Does it encourage them to take some kind of action (donate, volunteer, share or comment)?
7. Does the final page presentation maintain the look and feel of the main website?
8. Does the final page maintain the formatting that you developed for your preliminary landing page?  

Assignment 16 SEO
1. Have you checked to make sure that you don’t have any red stoplights in the Yoast SEO analysis?

• Your page title is the correct length (65 characters total including site title).
• There is a meta-description of the webpage that is156 characters or less.
• There is a well researched focus keyword for the page.
• The focus keyword appears in the header, the first paragraph, in the main body of the content and in the meta-description.
• The focus keyword appears in the page title and in the URL of the page.
• There are images on the page and they all have ‘alt’ descriptions.

SPELLING, GRAMMAR & LINKS

• A spelling and grammar check has been run on the page.
• All links have been checked—they work and they go to the page indicated.

You are done! Now, it’s time to get serious about landing pages. Next week, in Assignment 16, we’re going to learn a little bit more about the importance of landing pages, keywords, and how they all relate to SEO.  

The homework to hand in through your email to me:
I’m going to suggest that since your new landing page is in draft mode – that you wait until next week to send me the link after you click on ‘Publish’.

So today, just send me an email with one or two comments about how A15 went for you.

That’s it! Get going!

See you next week. Assignment Sixteen: Demystifying SEO. Use keywords in your headings, page title, page description and content. Post information rich, long content.

Copyright © Tim Magee