How to make a website or blog using free on-line options There are many free options for starting a website. Free blogs, like Blogger and Wordpress, free hosting services, plus things like Google Sites which helps you build a site. All of these options have different restrictions and pros and cons, so it all depends on the purpose and audience of your site. BLOGS Blogs are basically a news site, so you write updates (posts) and they appear on the site chronologically. Blogs are great if you just want to keep people informed about your activities and they provide good interaction with your users through comments and the way they network. If you use free blog sites & hosting, like Wordpress or Blogger, you will only be able to choose part of your domain name, so your website address will look like myngo.blogspot.com or mysite.wordpress.com For a customized domain name, you would need to purchase the domain name from somewhere like godaddy.com. Some blog sites will allow to use your purchased url, or you could pay for a fully hosted site (which is not covered in this guide). All blogs and even Google sites, use “What you see is what you get”, or WYSIWYG editors, so you don’t have to know any HTML; when you write your post or page, it’s basically like using a simple text editor or writing an email in yahoo or gmail. However, it is important and very useful to know the very basics of HTML code. If you have problems with the way things are displaying, or images are not appearing, or links don’t work, you should be able to fix them if you know the basics, covered later in this section. Customizing: With free blogging sites, you can customize the look of your blog, so it doesn’t look like everybody else’s. This is mainly done by choosing and modifying themes & templates. There are many themes or templates to choose from on sites like Blogger and Wordpress. Within those themes, you can often modify some elements, such as color schemes and the header image. Important Tips • Creating a header image is important, because it’s usually what users will see first when they come to your site. Dimensions of header images vary a lot, but are usually between 500 & 800 pixels wide, and no more than 200 pixels high. Include your logo and some imagery that represents the work that you do.
• • • •
•
•
Name your blog or site something obvious and simple, so people can find it more easily when searching. Be sure to fill in your profile and keep any information (especially contact info) current. It looks bad if people go to the effort of emailing you and they get no response because you don’t use that address. Having a profile photo is also important, to personalize your site. If your site is for an organization, use your logo as a profile image. With blogs, you need to keep active and update the site regularly with new posts, pictures, whatever. People have very short attention spans and memories on the internet, so updating your site is a way to remind them that you’re there. Some blogs allow you to turn on and off comments. I would advise against turning off comments unless you are getting spammed or nasty comments, because it can be a good way to interact with your audience. Moderating comments is a good idea. Most blogging systems now have tags, which are just words you assign to posts, relating to what the post is about. Tags help people search through your site more easily, so it’s good to add relevant tags to your work.
Blogging Options The two best options for free blogs are Blogger and Wordpress. Both are great options and very easy to use. They are also both available in several other languages, so investigate those options if your site is preferred to be in the local language. Blogger is now associated with Google, so if you have a gmail account, you can very easily and quickly create a blog on Blogger. Wordpress is good because you can also create pages, rather than just posts. This makes it more flexible because you can have information on different pages, rather than just in one column. https://www.blogger.com/ (will auto-select language and you can change in drop-down menu) features http://www.blogger.com/features http://wordpress.com/ features http://wordpress.com/features/ These sites will guide you through the setup and getting started when you sign up (in English or another language, depending on availability), so I won’t explain it here. Just keep in mind the tips about HTML and refer to the HTML section here if you need it. Free Hosting: Free hosting sites are more flexible than blogs, but will require more work to set up. Because they are just free website space, you will need someone who can design the whole website. http://www.110mb.com/ http://www.frihost.com/
Google Sites Google Sites not only provides free website hosting, but it’s also a very good, easy to use tool for creating your website. You will need to have a Gmail account, then you can sign into Google sites with your Gmail details and begin creating your site. http://www.google.com/sites/help/intl/en/overview.html IMAGES Sometimes free blogs won’t allow you to upload photos, but if you want people to see them, they must be stored online, so you can link to them and display them on your site (embedding). There are many sites for hosting your photos online. This is just a small selection of the most popular. Uploading There are many ways to upload your photos. All of the options below have a browser uploader. Just find the button that says Upload new photos and select the files. There are also desktop uploaders for each that can make things quicker and easier to do a lot of photos at once. Embedding There are 2 ways to show the images on your site. After you upload the photos, on a single photo page, you’ll have 2 options: Copy the link (url) or the HTML embed code. For the direct link, it will just be a url, ending in the image filename. Eg. http://example.com/picture-of-cat.jpg. To use this, copy it to your clipboard. In your blog writing page (WYSIWYG editor), there is a button for inserting an image. When you click this button, you will be prompted to enter a url, which you can simply paste in. If you copy the HTML code for the image, you will need to be in the HTML or Code mode of your blog editor, which there will be a button for. Then you just paste the full code in there where you want the image to be, then switch back to the visual editor. More detailed explanation of the HTML image tags is below in the HTML section. Flickr - http://www.flickr.com/ Flickr is a widely used and popular image hosting and sharing service online. There are many tools for using flickr with your websites. The first 200 photos you store on flickr are free. You may need a Yahoo account to use flickr, which is also free. Flickr is probably the most versatile and well used image hosting & sharing site. The downside is, if you have more than 200 photos, you will have to pay if you want people to be able to see all your photos, not just the most recent 200. The current price is $USD25/year.
Picasa Web Albums - http://picasaweb.google.com/ Picasa Web Albums is good for Gmail users, because it’s easy to sign up with a gmail account. For Windows users, you can also download and use Picasa for free. It’s a free photo management and editing program available from Google. For Mac users, you can use the Picasa Web Albums Uploader. Picasa web albums is completely free, but less versatile and good for sharing than flickr. The uploaders are good and Picasa is a great program for Windows users. Photobucket - http://photobucket.com/ Photobucket may be a good option if you’re a MySpace user, because it integrates well with Myspace, as well as FaceBook, Blogger, LiveJournal, Friendster, etc. Photobucket is also free for up to 10,000 photos, which should be enough ☺ Basic HTML HTML uses tags to control the look and placement of text and images on a website. Tags go around the text they affect, so there are opening tags<html> and closing tags, which are the same, but with a / before in front </html>. For example, to make text bold, the HTML will look like this: <b>I am bold</b> and what you see on the screen will be: I am bold The main tags you’ll need to know about are links, images and text alignment. LINKS Links are more complicated and are made by using <a href=”_______”></a> Put the link between the quotation marks, like so: <a href=”http://www.voiceboxtv.org/”> The text you want to represent, or display the link, goes after this, before the closing </a> tag, like this: <a href=”http://www.voiceboxtv.org/”>VoiceBox</a> Optional: By default, links will open in the same window or tab. If you want to make them open in a new window, you have to use target=”_blank”, so your link will look like: <a href=”http://www.voiceboxtv.org/” target=”_blank”>VoiceBox</a> IMAGES Images a bit different, in that they’re just one tag, without a separate closing tag. The image must already be online, and you link directly to the image file (.jgp, .gif, .png) with the following: <img src=”______” />. For more advanced use, you can also include titles, for text when the mouse is over the image. The title is included in the img tag and looks like this: <img src=”http://mysite.com/portrait.jpg” title=”Photo of me” />.
Even more advanced, you can make images links, by replacing the link title text with an image tag, so it would look like: <a href=”http://mysite.com”> <img src=”http://site/photo.jpg” title=”Photo” > </a> ALIGNMENT Text and image alignment is also quite useful sometimes. Text is always default aligned left, but sometimes it’s good to have some text, or an image, placed in the center or justified. This is done using the paragraph alignment tags. Just put this around the text or image you want centered: <p align=”center”> insert text or image here </p> Once you have used the </p> closing tag, it goes back to left-aligned text. IMPORTANT NOTES FILE SIZES & NAMES If you are uploading documents, images or other files to your website, it’s important to keep a few things in mind. Most users in Indonesia will not have fast internet connections, so they will not want to wait a long time for pages or downloads. Keeping files sizes small and the amount of non-text elements on a page (pics, video, mp3, flash) is important to keep people from being frustrated and leaving your site. To avoid problems, file names for anything you put online should only be lowercase alphabet (a-z), numerals (0-9) and hyphens (-). Spaces, other punctuation and symbols may cause problems. http://sustainablewebdesign.com/resources/582/ IMAGES It is a fine line between having an image too large for the web and having it too low quality or small. The general rule is, images should not be larger than 800 pixels on their longest side. For actual photos, from a digital camera or scanner, it’s best to use .jpg. For smaller, vector images or images with limited colors, like logos, .gif is usually best. Using photoshop, there is a great tool called Save For the Web. It lets you preview the different options, change sizes and see how big the file will be before you save it. Uploading - Your hosting/FTP Flickr, picasa web albums, photobucket, etc. FINDING GOOD COPYRIGHT FREE RESOURCES There are plenty of places that collect and offer copyright free, or limited copyright material for people to use in their work. Creative Commons and GNU
Public licenses, and public domain material (copyright has run out) is in many places online. CC & GPL offer different licences. Some are copyright free, so you can use them for any purpose without needing to credit anyone. Some let you use them for any purpose, but you have to give the copyright holder credit. Some donâ&#x20AC;&#x2122;t you let you use the materials for commercial purposes. Some of the best places to look are: Wikimedia Commons http://commons.wikimedia.org/wiki/Main_Page Wiki Commons is a wikimedia project collecting material that has lapsed out of copyright or has been uploaded by users and is offered under various licenses (CC, GPL). Flickr - The Commons http://flickr.com/commons This project is where cultural heritage institutions are invited to upload images from their public collections and share them on flickr. There are many historical photos from institutions like the Smithsonian, USA National Library of Congress, National Maritime Museum and many more. Creative Commons on Flickr http://flickr.com/creativecommons/ Aside from The Commons, many ordinary flickr users offer their work under the various Creative Commons licences. There are millions to search through and more every day. Creative Commons http://search.creativecommons.org/ Creative Commons lets you search various sites (google, yahoo, flickr), filtered through CC licensing. You can even find music and videos. WRITING GOOD WEB COPY Itâ&#x20AC;&#x2122;s well documented that people read differently on screens to on paper, so writing for the web is a different art to other kinds of writing. Principles of copywriting for the web http://www.provenanceunknown.com/edit/basics.html A very useful guide for understanding user behaviours and how to write for the web. Web copy style guide http://www.provenanceunknown.com/edit/style.html A basic guide for web terms and conventions.