First we are going to add a few more pages to the site we started last week.

Then we will learn some broader skills and processes rather than specific web design skills. These are:

• How to upload files to a live website, using File Transfer Protocol (FTP).
  • Upload the site we have just finished creating.
• How to set up and use a "Web Application" - an example of a piece of software that can run entire complex websites.
  • Create a wordpress blog for free on wordpress.com.
  • Add some posts and comments to your blog.
  • Add video and images to your posts.
  • Create custom CSS for your blog.

Finish our Lesson3 site.

If you didn't finish the lesson last week, right click and save the following files into your Lesson3 folder.

• index.html
• web.css

Let's alter the left hand menu to make it into our site navigation. Open the index.html file in notepad and alter the following code:

Your index.html file should now look like this in internet explorer.

Now we will create the pages that correspond to those links (If you click them at present you'll get an ugly 404 Page Not Found error). In your Lesson3 folder, make two copies of your index.html file and rename them links.html and about.html



Now open your about.html file in notepad. Edit the content div (the one where id="content") so it says something appropriate for an about page. Also edit the <title> tag so it says About.



Save and close your about.html file. Now open the links.html file and edit the content div so it is appropriate to a links page: A list of links. Also update the <title> tag.



Save and close your links.html file. Now when you refresh your index.html file in internet explorer and click on your navigation links, they should take you to the appropriate pages, like in this example.

If your about.html page doesn't have much content, you will notice a bug in how the footer is displayed. It is next to the navigation menu rather than below it. we can fix this by editing the css for the #footer.

Now we have a small but functional website with three pages. But it's only on our local computer. We need to upload it to a web server to make it live on the internet.

FTP our site

We will copy the site we just finished to a live subdomain on a web server. A domain is something like abd.net.nz or google.com. A subdomain is something like lee.abd.net.nz or analytics.google.com.

Your subdomain for this lesson is yourname.abd.net.nz, (where yourname is your full first name).

Type "http://yourname.abd.net.nz" into your browser's address bar. You should see something like the image below.



We will use FTP to upload our site content, including our index.html file - which will overwrite this page.

In another browser window type "ftp://yourname.abd.net.nz" into your browser's address bar. Enter the same username and password you use to log in to the hornby school computers.

Once you have logged in, you will see a list of the files and folders that make up the website - just like you do on your local hard-drive, except this is on the hard drive of a server in Tauronga.



The most important folder is the "httpdocs" folder. This is where the files and folders that make up our website go. Double click the httpdocs folder.




Now locate the "Lesson3" folder from last week. It should be in your My Documents folder.



Select all the files in the folder (there should 4). Press Ctrl+C to copy these files to the clipboard. Then in the explorer window for your sub-domain, click to select the window, then press Ctrl+V to paste the files.



When prompted if you want to overwrite the existing files, hit "Yes to All"



Now refresh your internet explorer view of your subdomain. You should see the site we created last week, now live on the internet, available for anyone to view.

Set up and use a Web Application

Most large websites are more than just HTML and CSS. These two things (almost) always provide the structure and design of a site. In addition, databases are often used to hold content and a programming language gets that content and puts it into HTML files.

If you learn a Server Side Programming language, you can create your own web applications. However, this takes a lot of learning and there are already many fantastic applications out there, often free to use on your own website! A famous example is wikipedia, which runs on MediaWiki, a piece of free open-source software. Open Source means you can download, view and change the source code. MediaWiki is written in PHP, a free and popular programming language. Anyone can set up a MediaWiki wiki on their own website for free.

Blogs are a popular form of website. Wordpress is one of the best and most popular applications that can power a blog. Unfortunately we don't quite have the right tools to set up independant wordpress blogs on our subdomains, but these tools are free and you could easily do it from home. (All we really need is a better FTP client than windows explorer.) However, wordpress.com allows you to set up a free wordpress blog and access most of the features you would be able to on your own private blog.

Sign up at Wordpress.com

wordpress.com/signup/

Fill in the form, making sure "Gimme a Blog!" is selected, and hit "Next >>"

On the next page, choose the subdomain name you want for your blog and hit "Signup >>"

Now everything is ready to go. Hit the "visit the homepage" link to see your new blog.

Looks pretty boring and there's nothing much there, but you'll soon change that. In the right hand menu, under "Meta" Click the "Site Admin" link. Now you are in your blog's admin section, accessible only by you because you are logged in.

There are extensive tutorials available on how to use wordpress at http://codex.wordpress.org/WordPress_Lessons. A good one to start with is http://codex.wordpress.org/First_Steps_With_WordPress#Starting_from_the_Top

Rather than reproduce those tutorials here, visit the above links and use them as resources to accomplish the following challenges:

• Edit the Right Hand menu to display personalised links.
• Create some categories and at least 2 new posts in your blog.
• Include an image in one post and an embeded YouTube video in another.
• Edit the first post that was created automatically when your blog was.
• Replace the banner image of your blog with a new one. Hint: Look under "Presentation" in your admin menu. You will need to use some graphics software such as MS Paint.
• Apply a different theme to your blog.
• Edit the CSS of you blog to create a personal look. Unfortunately, wordpress.com doesn't allow custom CSS for free - but you an still preview custom CSS, which is a good learning experience. You will need to look at the HTML code of your wordpress blog while you are writing your CSS. To find the HTML, view your blog (link in the banner), and navigate View > Source.
• Try both the "Add to existing CSS" option and the "Start from scratch" option (starting from scratch will be much harder!).