How to Set Up a Blog for Beginners

• Shop around for a blogging platform that fits your needs
• Pick a topic for your blog by considering your audience and what you hope to achieve with the blog
• Choose wisely when selecting a domain name or blog address
• Use the tools and options to customize your blog to your liking
• Write compelling blog posts to set your blog apart from others on the same topic
• Grow your readership using social media and word of mouth
• Monetize your blog, but remember it likely will only provide pocket change
  

• wish to learn how to set up a blog for beginners. All you need to get started is an email address and something to say.

  
  A blog (weblog) is a special type of website that displays entries or posts in reverse chronological order. The most recently written post appears at the top. The posts themselves consist of text, images, links to other websites and, typically, a means for readers to leave comments about the post.
  
  Blogs can function as online diaries, soap boxes, journalistic ventures or internet scrapbooks. They can cover any number of subjects from pop culture to politics to what you had for lunch yesterday.
  
  There's more than one free blogging service that can have you up and running in under five minutes. No technical expertise needed. Keeping the blog active and growing your readership takes much longer and requires a commitment to the project.

Step 1: Define Your Niche

Deleting Your Blog

 

Step 4b: Create Your Blog with WordPress.com

• Signing Up and Choosing Your Template

   

  1. Go the WordPress website. Click on the "Sign Up Now" button.
  2. On the next page, you will be asked to create a user name and password, give your email address and agree to WordPress.com's Terms of Agreement.
  3. On the next page, you will be asked to choose your blog's domain name and title as well as set your privacy settings. Once you've filled in these fields, simply press the "Sign Up" button.
  4. On the next page, you'll be asked whether you want to write a post, choose a template or visit your blog's main administration page.
  5. Clicking on the "Change Your Template" link will bring you to a page that allows you to choose from any number of WordPress.com's pre-designed templates. (Keep in mind that your template selection will be relatively limited and not especially flexible without the purchase of a Custom CSS Upgrade.) Choose the one you like best. You can always change it later by clicking on the WordPress interface's "Presentation Tab."

How to decide which WordPress to use

Your First Post

• 1. WordPress uses a rich text editor that operates exactly like a word processor. What you see is what you get.
  2. Enter a title for your post in the Title field and begin writing.
  3. You can insert images into your post by clicking on the "Add Image" button. If you know HTML, you can click on the "Code" tab to edit your post's source code.
  4. When you're done writing your post, you can either save it as a draft or publish it to your blog by clicking on the appropriate buttons immediately beneath the text field.
  5. You will then be given the option to view your post.
  6. Whenever you're ready to write a new post or manage your old ones, simply click on the "Write" tab of your WordPress Dashboard.

  
  

  Exploring the WordPress.com Dashboard

  
  
• • The other tabs that run along your WordPress Dashboard allow you to switch templates, upload a picture to use as your blog's banner, manage comments, control your settings and update your profile page.
  • You also have the ability to set-up your registered domain name, if you've purchased one, by clicking on the "Domains" link in the "Options" section of your Dashboard.

  
  

WordPress Functionality Videos from 

• Your Profile Page

   

  1. In WordPress, you have a behind-the-scenes profile and an About page. A link to your About page automatically appears in your blog's sidebar.
  2. To edit the information that appears on your About page, view your blog by clicking on the "View Site" link at the very top of your Dashboard.
  3. On your blog, you'll see an About link in the sidebar. Click on this link. It will bring you to your About page and give you the option to "edit this entry."
  4. Click on the "edit this entry" link. It will bring you to a text editor that will allow you to create your About page.
  5. Whenever you need to access your About page again, you will it find under the Write tab of your Dashboard at the Write Page link.
  6. To edit your behind-the-scenes profile, which is not linked to from your blog's homepage, click on the "Users" tab and then the "Your Profile" button. Don't forget to click the "Update Profile" button to save your changes.

  
  
• 
  

  Domain Mapping

   

  WordPress offers domain mapping capabilites for those users who wish to "point" a registered domain name toward their WordPress blog By utilizing this option, your blog's URL address will be www.yourblogname.com instead of www.yourblogname.wordpress.com.
  You will find the WordPress domain mapping option under the Options tab of your WordPress interface.
• 
  

  Deleting Your Blog

   

  • You can always delete your blog by clicking on the "Delete Blog" button under the Options tab of your Dashboard. Your blog will not be deleted, however, until you click on the confirmation link sent to you via email. 

  
  
• 
  

  Some Useful WordPress Videos from Pop Star Lavanya.

• Step 4c: Create Your Blog with Vox

   

• Signing Up and Choosing Your Template

  1. Go to the Vox site.
  2. Click on the "Start a Vox Blog" link to sign up for an account.
  3. The Vox sign-up page will ask you to create a user name, submit your email address and accept their terms of service. You will also be asked for your gender and birthday.
  4. Once you've submitted this information, you will be sent an email with a verification code and link to confirm that you're email address is legitimate. Check your email. Click on the verification link in your email. It will take you to a page that gives you three options - creating your Vox profile, setting up your blog's look or writing your first post.
  5. Click on the "Set Up Your Vox" link to choose a template for your blog. The templates page will let you create the look and feel of your blog's layout and design. You won't be able to alter the templates in any substantial way, but you can control the contents of your sidebar and customize a banner if you choose.

  
  

• Your First Post

   

  1. To post your first entry, click on the "Compose a Post" link at the top of the page.
  2. The Vox text editor is a simple, word processor type interface with special buttons along the top to help you add different types of media to your post.
  3. Enter a title in the "Title" field and write your post.
  4. Insert any images, video, audio or Vox Collection you'd like. You can also add "tags" to your post to make it searchable by other Vox users.
  5. Click the "Save" button when you're done to publish your post.
  6. You'll be given the option of viewing or editing your post, bookmarking it online or sending it to friends.
  7. Whenever you'd like to write a new post, click on the "Compose a Post" link at the top of your Vox Dashboard.

  
  

• Exploring Your Vox Dashboard

   

  1. Your My Vox drop menu allows you to access to all of your posts, uploaded files and profile. You can play with the layout and design of your page by clicking on the "Design" button.
  2. Next to your My Vox menu are buttons for "Neighborhoods" and "Groups." Neighbors appear on your homepage and consist of family, friends and other Vox users that you add to your page. Groups are Vox users organized around common interests.
  3. You can also send messages to family, friends and other Vox users through the Vox interface by clicking on the "Messages" button in the left hand corner of your page.

  
  
• 
  

  Your Profile Page

    

  To edit your Vox profile, click on the "Edit Profile" button located in the My Vox drop down menu. You'll be able to enter in as much or as little information as you'd like, but remember that because Vox emphasizes social networking, your profile is an integral part of your blog's homepage.
  
• 
  

  Domain Mapping

   

  Vox does not offer a domain mapping option at this time.
  
• 
  

  Deleting Your Blog

   

  • You can delete your Vox account at any time, by clicking on the "Account" link in the upper right hand corner of your Dashboard. On the Account page, you'll find a "Your Account" link at the bottom of a list of links on the left hand side of the page. Click on "Your Account," and a "Cancel Your Account" option will appear directly beneath it. 

  
  
• 
  

  Step 4d: Create Your Blog with Typepad

   

  Signing Up and Choosing Your Template

   

  1. Go the Typepad website.
  2. Click on the "Free Trial" or "Sign Up" buttons to sign up for an account. (Typepad is a pay service with four different pricing levels ranging from $4.95 - $29.95 per month. There is a free 14-day trial period. Your account can be canceled at any time.)
  3. On the sign up page, you will be asked to submit your email address, create a blog address and agree to Typepad's terms of service.
  4. On the next page, you will be asked to choose a pricing plan and submit a valid credit card number. You will not be charged until after your free trial ends. (Canceling a Typepad account is not a hassle and can be done with the click of a button.) Review the pricing plans carefully as some plans offer features that others do not. For instance, only the Pro, Premium and Plus plans allow you to assign a registered domain name to your site.
  5. After entering in your credit card information, you will be asked to design your blog and assign its privacy settings. You will choose from a number of design and layout options as well as decide whether or not you want your blog to be public, public but unlisted or password protected. Don't worry about which template you choose. You can always change it later. Whether you choose to make your blog public or private is entirely up to you and depends largely on your blog's content and target audience. You can change your blog's privacy settings at any time.
  6. You will then be asked to confirm your registration. Once you've reviewed your information, click "continue." You will be brought to your Typepad Account's quick start page.
  7. Keep in mind that you won't be able to see your blog online until you've written your first post. 

  
  

• Exploring the Typepad Dashboard

   

  1. You can start a post by clicking on the "Begin a Post" button, or you can explore the full menu of text and design options by clicking on the "My Weblog" link in the Quick Start box. (This link will change to reflect your blog's name once you've assigned it one by clicking on the "Configure" tab and filling in the Weblog Name field.)
  2. Clicking on "My Weblog" (or your blog's name) will bring you to your blog's administrative dashboard.
  3. You'll see that you have two sets of tabs. The top level includes your Photo Albums, Typelists and account Control Panel. The second level includes your blog's design and post-related options - Compose, Design and Configure.
  4. Starting with the top level, the Control Panel button lets you control your blog's settings, account information, statistics and personal profile.
  5. Typelists are lists you can create and add to your blog's sidebar. Typepad has several built in options that let you add your favorite books and records from Amazon.com. A Typelist can, however, contain anything you want - a blogroll, text, a picture, a search bar, etc.
  6. Under the Configure tab, you'll find options related to the way your blog archives posts, what it is named and how it is publicized. You'll also find an option to add a feed or RSS button to your site so that readers can subscribe to your blog's posts. If you choose a Pro, Plus or Premium plan, you will find an option to "point" a purchased domain name to your Typepad site.
  7. To play with your site's design, click on the second level "Design" tab. You will be taken to a menu that allows you to manipulate your blog's design by adding new text to the header, choosing a new template or rearranging your sidebar's contents.

  
  

• Your First Post

    

  1. On the second level of tabs, click on the "Compose" link. This will bring you to Typepad's text editor.
  2. Enter a title in the Title field and choose any categories you want to use to archive your post from the drop down menu.
  3. Type text in just as you would on a word processor.
  4. You can add images, and if you know HTML, you can edit your post's source code by clicking on the "Edit HTML" tab.
  5. Once you've finished writing, click the "Save" button. This will publish the post to your blog. If you'd like to save the post as a draft, you can choose that option in the drop down box on the lower left hand side of the text editor.
  6. You can view your blog at any time by clicking on the "View Weblog" link in the upper right hand corner of your page.

  
  
• 
  

  Your Profile Page

   

  You will find a link to your Typepad Profile page under the Control Panel tab of your Typepad interface. If you'd like to include a link to your finished Profile page in your blog's sidebar, you can add it by clicking on the "Select Content" link under the "Design" tab.
  
• 
  

  Domain Mapping

   

  Typepad offers domain mapping capabilites at the Pro, Plus and Premium levels. Domain mapping allows you to "point" a registered domain name toward your Typepad blog so that your blog's URL address will be www.yourblogname.com instead of www.yourblogname.
  You will find Typepad's domain mapping option under the "Control Panel" tab. There is a link to Domain Mapping under the "Site Access" sub-tab.
  
• 
  

  Deleting Your Blog

   

  You can cancel your Typepad account at any time by clicking on the Control Panel tab. There you will find an Account Info sub-tab. Under Account Info, you will find the Cancel Account link.
  
• 
  

  Step 5: Write Great Blog Posts

   

  In the world of blogging, content is king.http://performancing.com/best-of-performancing#writing If you want to generate an audience for your blog beyond your immediate friends and family, it is essential that your posts be well-written and provide value to readers.http://www.problogger.net/archives/2005/12/30/tens-tips-for-writing-a-blog-post/ It's also essential that you update your blog with new posts on a regular basis. Creating a blog is easy. Maintaining a blog is hard.
  

• General Tips on Writing a Blog Post

   

  1. Be Passionate. You're writing a blog because you have something to say so say it with style, enthusiasm and grace. Your voice is the only thing that will make your blog stand out for the millions of others out there.http://www.alistapart.com/articles/writeliving
  2. Be Funny. Never underestimate the power of humor in blogging. Humor makes your posts enjoyable to read and more likely to be linked to by other bloggers.http://performancing.com/content/writing/10-killer-post-ideas
  3. Be Consistent. It's important to post on a regular basis so that your readers keep coming back. Don't post if you don't have something to say. No content is better than bad content, but maintaining your blog should be a priority if you wish to reach an audience beyond your peers.
  4. Be Useful. Provide value to your readers. It might be entertainment value or educational value, but reaching out to readers means giving them something they need but didn't have before - an insight, a joke, a tool or a new way of looking at something.http://performancing.com/power-blogging/11-reasons-to-write-when-youve-misplaced-your-passion
  5. Be Readable. Remember that you're writing text for people reading from computer screens. Your posts should be short and easy on the eyes. If they get lengthy, consider breaking up the text visually with bullet points, images or selectively bolded text.http://www.useit.com/alertbox/9710a.html
  6. Be Responsible. Blog posts almost always contain links to other websites. It's important to give credit where credit is due and link back to a site if you've used it as a reference.http://blogoscoped.com/archive/2006-10-11-n47.html

  
  

• Popular Types of Blog Posts

    

  1. Lists" People love lists. They are easy to read and fun to write. Lists are often linked to by other sites and can help your blog gain attention online. The best lists are original, comprehensive, provide value to readers or are just plain funny.http://www.bestweekever.tv/2007/08/20/top-10-karaoke-songs-to-avoid-at-all-costs/
  2. Reviews" You have an opinion, or else you wouldn't have started a blog. Review films, books, gadgets or whatever else might be pertinent to your blog's subject matter. If your reviews are thoughtful enough and your blog gains a following, you may even be able to solicit companies for products or materials to review.
  3. How To" "How To" posts provide value to readers, and if done well, have a longer lifespan than your average blog post. They are frequently linked to by other sites and allow readers to benefit from your expertise.http://www.stevepavlina.com/blog/2006/05/how-to-make-money-from-your-blog/
  4. Attack Posts" While they should be managed carefully, there's no denying that posts which attack a story, product or person can generate attention for your site. Combine this with the list strategy, and you've got your first "10 Things I Hate About..."post.http://performancing.com/promotion/how-to-turn-link-posts-into-linkbait
     
     
• 
  

  Step 6: Build an Audience

   

  It's estimated that there are over 71 million blogs in the world with another 100,000 being created daily. Standing apart from the crowd isn't easy, but if you do decide that you'd like to cultivate an audience outside of your mom, here are some tactics you might consider:
  

  1. Add your URL to Google.http://www.google.com/addurl/  This tells Google's army of robot spiders to check your blog's content - adding it to Google's search results.http://www.searchenginepromotionhelp.com/m/articles/search-engine-optimization/googles-new-spider.php To maximize your rank in Google's search results, be sure that your posts' headlines are clear and on topic. Keywords are more important than cleverness.http://www.boingboing.net/2007/09/06/cory-explains-how-to.html
  2. Claim your blog at sites like Technorati and Blog Top Sites. These are blog directories that allow people to seek out blogs on subject matters of interest to them. You can also apply to be added to the moderated directory Blogarama or try a relatively new service like BlogRush, which will advertise your blog's content across a network of related blogs.
  3. Remind your readers that if they like a post, they should add it to sites like Digg, Delicious, Netscape, StumbleUpon, Ma.gnolia or Reddit. These services can help attract new readers to your site.
  4. Link to other sites. The owners of the sites you link to are likely to check out your blog particularly if the link from your blog drives traffic to their site.
  5. Become a regular commenter on blogs that cover similar topics to your own. You're part of the blogosphere now and therefore a potential player in a community. Provide useful and thoughtful comments on other people's blogs, and it's all the more likely that they will check out yours.http://www.problogger.net/archives/2006/10/12/10-techniques-to-get-more-comments-on-your-blog/
  6. The old-fashioned way. Tell everyone about your blog.http://www.gladwell.com/tippingpoint/index.html Add its URL to your email signature. Put it on your business cards. Network at blogging conferences.http://www.blogher.org/about-blogher-conferences-events Kiss some hands and shake some babies, or is that the other way around? 

  
  

• Step 7: Measure Your Traffic

   

  1. Blog hosts like WordPress and Typepad keep track of your stats for you. They will tell you how many people have visited your site and when.
  2. If you'd like a more in-depth set of statistics including where people are visiting your site from, what pages received the most views and detailed graphs of your site's popularity, there are a handful of free services you can use to track that information.
  3. The most popular include Google Analytics and Site Meter. Both services give you step-by-step instructions in how to set-up their services on your blog although some familiarity with basic HTML coding is helpful.http://www.google.com/analytics/
     

• Step 8: Monetize Your Blog
  

  • While you shouldn't quit your day job, there are a handful of quick and easy ways to monetize your blog. A basic knowledge of HTML coding is helpful when using these services, but most blog hosts will walk you through how to add these services.
  • Google AdSense: Google Adsense will search your blog and add ads relevant to its content. These ads can appear in a number of different text and image configurations. You make money when people click on the ads.https://www.google.com/adsense/login/en_US/
  • Yahoo! Publisher Network: Yahoo!'s version of AdSense.http://publisher.yahoo.com/ 
  • Amazon Associates: An Amazon.com program that places ads relevant to your blog's content on your blog. You make money when readers click on the ads and make a purchase through Amazon.http://affiliate-program.amazon.com/gp/associates/join
  • Adbrite: A network that lets blog owners sell text ad space directly to advertisers.http://www.adbrite.com/ 
    

• Legal Resources for Bloggers
  

  • • There are some legal issues that all bloggers, but particularly those aspiring to capture a large audience, should be aware of. Most deal with the use of images, video and audio files. The Electronic Frontier Foundation has a complete legal guide for bloggers online.http://www.eff.org/bloggers/lg/
  • • You may also want to copyright your own original work through Creative Commons. Creative Commons offers several different kinds of licenses. Some let people use your material freely but with attribution. Some let people use your material for anything but commercial purposes. You can check out the full list of Creative Commons licenses at their website.http://creativecommons.org/

How to Make Your Own Website Facts

 

• A web page can be created using only a text editor.
• Cascading style sheets are the best way to change font style and color.
• Sans-serif fonts are the easiest to read on monitors.
• You can use the image tag to change the size of your images.
• Once your website is created, you will need to upload it to your web host's server. 

Introduction

How to Make Your Own Website
If you want to make your own website but do not want to spend money on an expensive program, have no clue what HTML and CSS means and don't know the basics of web design, then this page is perfect for you. It will guide you step by step on the basic elements of a web page using only a text editor, a web browser and your computer.


Are you feeling like everyone has their own website except you, and that you have no idea where to start? Well, don't despair. This page will take you through the basics of how to create a website. This page was written to conform as much as possible with HTML 4 Specifications created by the World Wide Web Consortium (W3C).


Since the purpose of this page is to teach you how to make your own website, even if you're not particularly net-savvy, it is going to guide you through the basics of HTML and CSS programing. By the time you're finished with this page, you will master all of the fundamental skills necessary to build your own website from scratch.





Let's Get Started

If you want to make your own website but do not want to spend money on an expensive program, or you have no clue what HTML and CSS mean, and you don't know the basics of web design, then this page is perfect for you. It will guide you step by step on the basic elements of a web page using only a text editor, a web browser and your computer.

First you will need a domain, which you can find at a site like GoDaddy. Then using a a host provider such as Pow Web, they will direct you to an area where you can begin to formulate your web page.


Creating Your Home Page

    * It's time to start creating your home page. For the purposes of this exercise, we will be creating a very bare bones webpage. The HTML for a very basic web page looks like this:

    * <html>
    * <head>
    * <title>Page Title</title>
    * </head>
    * <body>
    * </body>
    * </html>

    * The letters between the <> are called tags. Tags come in pairs that begin with the basic code and end with the basic code preceded by a backslash (/). So what do all these mean?

   1. <html> tells the browser that the page is written in html. Always start and end your page with this tag. The </html> indicates the end of the page.
   2. <head> indicates where the header begins and </head> signals where it ends. Information in this section will not be visible on the page.
   3. <title> is the title of the document that is located at the top of the browser. Again, the </title> is placed at the end of the page. Many beginners forget this tag and the page ends up being titled "untitled." The title of this page is "How to Make Your Own Website - Mahalo".
   4. <body> indicates where the body begins and </body> where it ends. This is where the majority of your information will be put.

    * That's it. That's all you need to have an html page. Of course, what you end up with is a blank page, but the rest is coming. Your home page is the only page that has a predetermined title. For future pages, you can choose your own names for them.


Formatting Text

    * Text is the most important aspect of a web page. Formatting text is relatively simple.

   1. Paragraphs: To create a paragraph, surround the words with p code brackets.
   2. Bold: You can make text bold by surrounding it with <b></b>. A similar tag is <strong>. Strong is used to indicate that text should have a stronger emphasis, which most browsers display as bold.W3C HTML 4.01 Specification: Text1
   3. Italics: You can add italics by surrounding text with <i></i>. A similar tag is the <em>-- </em> --> or emphasis tag. Emphasis is generally displayed as italics.W3C HTML 4.01 Specification: Text1
   4. Breaks: The <p> tag will automatically create breaks in between paragraphs, to create line breaks elsewhere, you can use the <br> tag. This tag is different because it stands alone and does not require a closing tag such as </br>

    * You may see other tutorials talk about fancy tags such as tt, strike or small. These tags have been deprecated in favor of style sheets, which is covered in the next section.

Headings

    * Header tags are a great way of breaking up text on a page. They come in six predefined sizes with <h1> being the largest and <h6> being the smallest. An extra blank line is automatically added before and after a heading.W3 Schools: Basic HTML Tags2 Again, you need both an opening (<h1>) and a closing (</h1>) tag.


Character Entities

    * Computers come with all sorts of neat characters that are not easily understood by web browsers. They require character entity references. For example, if you want to display the & sign you need to type in &#38; or it may not show up correctly. Some of the more common characters you will need to know include:

• For more character entities, check out:
  1. Alan Wood's Web Site: Index of HTML 4.01 Character Entity References
  2. W3 School: HTML 7-BIT ASCII Reference
  3. W3C: Character entity references in HTML 4
  4. Web Design Group: Iso 8859-1 Character Set Overview

Adding a Cascading Style Sheet

    * Changing the alignment, color, style and other features in your web page is done though cascading style sheets. These can be embedded or linked. For the purposes of this page, we are going to create an embedded style sheet.
         1. Start by going up to the top of your html document.
         2. After the </title> tag but before the </head> tag add in the following information:
                o <style type="text/css">
                o </style>

    * Every style change made on the web page will be inserted between those two tags.W3C: Dave Raggett's Introduction to CSS3 Here is how you add style:
         1. On a new line, in between the two style tags, type in the tag you want to change. For the purposes of this exercise we will be working with the h1 tag.
         2. Then type a space followed by {
         3. Type in the style code followed by }

    * So, let's say you wanted to change header 1 to make it centered. This is what you would type h1 {text-align: center} between the style tags. The entire code should look like this:
          o <style type="text/css">
          o h1 {text-align: center}
          o </style>


Making Temporary Style Changes

    * Now that you understand the basics of style sheets, lets take it one step further. Let's pretend you want to have one paragraph on your web page centered, but the rest of your paragraphs aligned left. This is done by adding classes. You can choose your own names for classes.

    * To add a class to a style sheet:
         1. Add a period (.) after the tag.
         2. Type in a name.
         3. For example, you could type p.middle {text-align: center}
    * You also need to make a minor adjustment to the body of your document when you want to use that class. Instead of simply typing <p> you type <p class="middle">.


Popular Style Changes

    * Here are some of the more common changes you may want to make. Color and font changes are discussed in the next sections. Examples are marked in olive. To review the basic format is Tag.class {attribute: value}
   
    * <td align="left" valign="top">
    * Align text center:
    * Align text right:
    * Align text left:
    * Bold:
    * Normal font:
    * Italic:
    * Underline:
    * Strike through:
    * </td>
    * <td align="left" valign="top" width="210px">
    * text-align: center
    * text-align: right
    * text-align: left
    * font-weight: bold
    * font-weight: normal
    * font-style: italic
    * text-decoration: underline
    * text-decoration: line-through
    * </td>
    * <td align="left" valign="top" width="260px">
    * h1 {text-align: center}
    * p.right {text-align: right}
    * p {text-align: left}
    * h2 {font-weight: bold}
    * p {font-weight: normal}
    * h3 {font-style: italic}
    * h4 {text-decoration: underline}
    * p.cross {text-decoration: line-through}
    * </td>
    * </tr>
    * </table>


More Information about Cascading Style Sheets

    * For more information about Cascading Style Sheets availability, check out any of the following sites:
        

1. W3 Schools: CSS Tutorial
2. W3C: Dave Raggett's Introduction to CSS
3. W3C: Cascading Style Sheets
4. Sitepoint: An Introduction to Cascading Style Sheets (CSS)
5. EchoEcho.com: CSS Tutorial

Changing Fonts

    * Changing fonts and font size is not more difficult than other style changes, but it can be trickier. It is trickier because the changes will affect the readability of your website. Using a fancy font may be pretty, but can also make your site unreadable to visitors. The same goes for making fonts smaller and fixing font sizes.useit.com: Let Users Control Font Size4

    * When changing the font size, it is best you set it in terms of percent rather than points, which creates a fixed font size.W3C: Dave Raggett's Introduction to CSS3 Percentage allows visitors to increase or decrease the fonts on your site if necessary. Here are a couple of examples on how you can do this:

  * Double font size:               * font-size: 200%    * h1 {font-size: 200%}
  * Reduce font size in half:     * font-size: 50%      * p.small {font-size: 50%}
  * Normal font size:               * font-size: 100%    * p {font-size: 100%}


      You can also change the fonts used on your website. You will find that most sites (like Mahalo) use sans-serif fonts, which have no lines at the end of the characters, because sans-serif fonts are easier to read on monitors. Interestingly, the opposite is true when it comes to printed material. However, fonts will only work if your viewer has the fonts installed on their computer.BCE 61 Resources: Font for Web Pages5 Luckily, CSS allows you to list a variety of fonts for a given tag or a generic font family.W3 Schools: CSS font-family Property6 That way, if the user does not have your first choice of font, it will use a similar font.

    * Here are the five generic fonts and the most commonly used examples of these fonts:
         1. Serif: Times New Roman, Book Antiqua, Garamond, Palatino Linotype and Georgia.Code Style: Serif Font Sampler and Survey Results
         2. Sans-serif: Arial, Century Gothic, Tahoma, Helvetica and Verdana.Code Style: Sans Serif Font Sampler and Survey Results
         3. Monospace: Courier, Lucida Console and Monaco.Code Style: Monospace Font Sampler and Survey Results
         4. Cursive: Comic Sans MS, Monotype Corsiva and Apple Chancery.Code Style: Cursive Font Sampler and Survey Results
         5. Fantasy: Impact, Haettenschweiler, Marker Felt, Copperplate and Papyrus.Code Style: Fantasy Font Sampler and Survey Results

    * To change fonts on your site you use the "font-family" and then list the fonts in order of preference. Each font is separated by a comma and fonts that have more than one word must be placed in quotes.W3 Schools: CSS font-family Property6 A couple of examples on how you would do this:
          o p {font-family: arial, "lucida console", sans-serif}
          o h1 {font-size: "times new roman", georgia, serif}


More Information on Fonts

    * For more information about fonts and font availability, check out any of the following sites:
     

1. Hobo: What Is The Best Font Size To Use In Website Design?
2. Alledia: Why Should You Choose a Website Font Carefully? (May 24, 2007)
3. Webspace Works: Fonts for Web Design: Further Comparison of Cross-platform Dependability
4. Web Design Tips & Tricks: Common Fonts to All Versions of Windows & Mac Equivalents
5. Microsoft: Recommended Fonts

Changing Color

 

• More Information on Using Images
  
  

  • For more information about color, check out any of the following sites:
    1. Website Design Tutorial: Optimizing Images for the Web
    2. 1-Hit: Loading Time Checker
    3. Noupe: 63 Impressive Website Background-Images: Trends, Resources and Tutorials (April 14, 2008)
       
       

• Sources for Free Images
  
  

  • You can find many sources for free images on the web. Make sure you read any guidelines the site has before using the image. Usually, the sites expect you to link back to them or give them credit.
  • Absolute Background Textures Archive
  • The Best Collection of Clip Art, Graphics and Web Images
  • Cool Text Logo and Graphics Generator
  • Blackat's Free Web Graphics
  • Brownielocks Free Watercolor Backgrounds
  • Dan's Clipart Library
  • Eftelibra Graphics
  • Ender Design
  • Marvelicious Graphics

  
  

Creating Links

• There are two types of links you need to know how to create: internal and external. Internal links are links parts of your page. External links are links to pages on other sites or pages on your site.

• An external link has three parts:
  1. Opening tag (which includes a web address)
  2. Link text (the words you want the browser to show)
  3. Closing tag
• It looks like this <a href="http://popstarlavanya.blogspot.com">Pop star lavanya - Free Online Jobs</a> but would show up looking like this: Pop star lavanya - Free Online Jobs

• If you are linking to a page in your own site (which you'll want to do as you expand your website), you are not required to (but can) use the entire web address. For example, if I wanted to link to a page on this site named webpage.html all I would need to type is:
  • <a href="webpage.html">Web Page</a>.

• If the file is located in a parent folder or directory, you need to add "../" in front of it.W3C: Getting started with HTML    For example:
  • <a href="../webpage.html">Web Page</a>.

• If the file is located in a subdirectory, you need to add "/" in front of it.W3C: Getting started with HTML - For example:
  • <a href="/webpage.html">Web Page</a>.

If you want to display an image instead of text for a link (for example, the Mahalo logo in the upper left is a link to Mahalo's home page, you replace the link text with an image tag. For example: <a href="http://www.popstarlavanya.blogspot.com"><img src="lavanya.gif" alt="Mahalo's Home Page"></a>

Changing Link Style

• • Changing the color or style of links is done the same way text (such as paragraphs) is changed. The only difference is the tags.
    1. a:link is used for unvisited links.
    2. a:visited is used for visited links.
    3. a:active is used for active links. A link is active once you click on it.
    4. a:hover is used for hovered links. A link is "hovered" when the mouse is moved over it. This is not supported by Netscape browsers earlier than version 6.
       
       
• 
  

  Creating Lists
  
  

  • There are three types of lists you can create in HTML:

  1. Ordered (numbered) <ol></ol>
     • Each item in the list is surrounded by <li></li> tags.
  2. Unordered (bulleted) <ul></ul>
     • Each item in the list is surrounded by <li></li> tags.
  3. Definition <dl></dl>
     • Each term is surrounded by <dt></dt> tags.
     • Each definition is surrounded by <dd></dd> tags. 
     
     

• Uploading the Files to the Web
  
  

  • Now that you have the very basics of your website, you need to upload them to your web host's server. This is done using FTP (File Transfer Protocol). This differs slightly depending on which host you have chosen. Luckily, it is also one of the most frequently asked questions by new users. Here are links to the more popular web hosts on how to upload to their sites:
    1. BlueHost: How do I Upload my Website?
    2. GoDaddy.com: Uploading Files to Your Web Site
    3. HostMonster: How Do I Upload a Webpage?
    4. IPOWERWEB: Configuring: Connecting to your site using FTP
    5. Network Solutions: How To Upload Files Using FTP
    6. SiteGround: How to Use FTP to Upload Your Website?
    7. Yahoo! Web Hosting: FTP
       
       
• 
  

  Conclusion
  
  

  • Check out Mahalo's How To pages such as How to SEO Your Website, How to Increase Website Traffic and How to Set Up a Blog for Beginners. You should also check out Mahalo's pages on Web Design, HTML, CSS and Search Engine Optimization for great links to other sites. You may also want to check out some of these links:
    

  • Tutorials
    
    • W3 Schools Online Web Tutorial
    • Internet Tutorial: Understanding HTML
    • HTML Code Tutorial
      

  • Website Tips
    
    • English Atheist: How to Make An Annoying Webpage
    • useit.com: Top 10 Mistakes in Web Design
    • Search Engine Guide Blog: Avoiding Common Web Site Mistakes
    • Web Design Library: Ten Fatal Mistakes That Make Web Sites Stink
    • trace.wisc.edu: Designing More Usable Web Sites
      

  • Creating Website Articles
    
    • 2 Create a Website: Create a Free Website? Think Twice About It!
    • A List Apart: Articles
    • 456 Berea Street: Turning a List into a Navigation Bar
    • Pick Brains: How to Pick the Right Website Topic
      
      

      References
      
      

      1. W3C HTML 4.01 Specification: Text
      2. W3 Schools: Basic HTML Tags
      3. W3C: Dave Raggett's Introduction to CSS
      4. useit.com: Let Users Control Font Size
      5. BCE 61 Resources: Font for Web Pages
      6. W3 Schools: CSS font-family Property
      7. Code Style: Serif Font Sampler and Survey Results
      8. Code Style: Sans Serif Font Sampler and Survey Results
      9. Code Style: Monospace Font Sampler and Survey Results
      10. Code Style: Cursive Font Sampler and Survey Results
      11. Code Style: Fantasy Font Sampler and Survey Results
      12. The University of Texas at Austin: Generating Colors in HTML
      13. W3C: Basic HTML Data Types: Colors
      14. W3C: Getting started with HTML
      15. JoeSchmidt.com: Leeching Images and the Leechers Who Leech Them(June 29, 2005)
      16. EchoEcho.com: CSS Tutorial: CSS Links