(pianoPed) Notes about Web Site Projects

It seems kind of weird for me to be adding a piano pedagogy category, but I think it is good to post online all the teaching info that I can, and it might be of use to others.

I want to summarize a few tips I went over in class, and provide a few helpful hints as you’re working on your web projects (projects 1 and 2).

Project 1: WYSIWYG Web Page Development

For project 1, building a standard web site with a WYSIWYG editor, the goal is to gain understanding about basic HTML, formatting a page, linking content, and adding some simple graphics. More specifically, you want to understand the need for using tables to assist in page formatting, and to understand the difference between linking to other pages on your site versus linking to other pages on the Web (outside of your site).

When you link to pages within your site (creating a link to your bio from your home page, for example), the link address is relative to the current page location. If all of your pages are in one folder, then the filename is the address (bio.html) without any http prefix or domain information. If the page is on an external site you need to specify the full address, starting with the http (http://www.bsu.edu/music).

For a standard web page, tables are pretty much the only way to specify page margins and multiple columns. Otherwise, your only alignment options are left, center, or right.

Project 2: WordPress

For your WordPress project, WordPress is being used as a Content Management System (CMS). You choose a layout that applies to all of your pages, and then focus on entering content. Based on your layout choice and decision to use a pages widget in one of your sidebars, WordPress will automatically creates links to all pages to your site and make them available on every page. Most of the links that you add to your content will be external links with the full address listed.

Explore the dashboard for your WordPress site. The sidebar on the left has all the available commands and settings options grouped into categories. Arrows to the right of any category will expand or collapse that pane. The best way to learn how to use the dashboard and WordPress is to go through those links on the left and see what controls each one offers.

In the page and post editors, the default toolbar only shows one row of tool icons. The icon on the far right of the first row shows/hides the second row of tool icons.

You should also experiment with different themes (under the Appearance heading). Themes that offer custom header options are the best for creating your own personal look, since they let you upload your own graphics or pictures to use as a page header. While it seemed like three-column layouts were visually busy in class, you have to keep in mind that my projection settings are for a much smaller screen size than the vast majority of computer users. On a 17″ monitor, your web window will usually be much wider, which might make a three-column setup easier on the eye. You just need to see what you like.

There are two additional settings for each post and page that I didn’t really go over in class. Categories are keywords that you create and can use to organize links and blog posts into topic groups. I use categories on my teaching site to correspond to class names, with sub-categories to distinguish notes from assignments for a given class. I use link categories to sort my links for display on my sidebar. If you use a links widget in your sidebar, links will appear sorted with their category name as a section header. You can see how this works on this page: ilocker, BSU, Keith Kothman, and Music Blogs are all post categories.

Post Tags are additional keywords that you can assign to any blog post. They are not stored as categories, but consistent use can be a big help to people searching your blog. For example, I have used the tags “web design” and “wordpress” as tags for this post. The search function first looks through post tags before searching the text of individual posts. Tags won’t come into play for your basic site design for this assignment.


Domains on the web refer to the hierarchy web addresses. Top-level domains are .com, .edu, .gov, .net, .org, and various country domains. Top-level domains are the first sorting criteria for web addresses. An individual user or company cannot create a top-level domain. There is an external organization that determines top-level domains. As an individual or business, you can register a host name. Most users conflate the meaning of the different domain distinctions as one domain, such as keithkothman.com as a domain name. Really, keithkothman is a host name and .com is a top-level domain, but you should understand the usage. keithkothman.com is really a Uniform Resource Locator, or URL. Web address and URL can be used interchangeably.


3 responses to “(pianoPed) Notes about Web Site Projects”

  1. How do we change the name of our page. like at the top of the webpage mine says Blackandwhitestudio and I want to make it all lowercase and put in the spaces.

  2. You should be able to change the page title from the title box in the page editor. The title box is above the text editor.

    But I think what you’re asking about is the site name: Blackandwhitestudio’s Blog. This shows at the very top of all pages, the same way New York Times (in some fashion) shows at the top of all NYTimes pages. If you want to change the site name, use the Dashboard and go to Settings | General, and change the “Site Title.”

Leave a Reply