Create Your Own Webpage

Today’s Agenda

• Cut & paste code

• Notepad++ or Notepad at home

• FTP

• Web Hosting

• Wordpress

Cut & paste code

• www.Codelifter.com– Click on Javascripts

No right click

• Click on Alerts & Prompts

• Click on “Basic No-Right-Click Script with Alert Box” (4th option down)

• Copy and paste code – Note, you don’t take all of it, just what’s after: “Put the following script in the head of your page:” and get rid of the line of ===== at the bottom of the script

• Paste into main.htm (or pictures.htm), save, and check by trying to right click.

Date Last Modified

• Click Back to go to main javascript menu and click on Tips & Tricks

• Select Automatically Show the Last Modified Date/Time of a Page with Javascript (currently 2nd from bottom of the list)

• Note: Not all guaranteed to work but I tested the 2 examples here. 2/24/10

Helpful programs

• Text Editor: – Notepad++ (color codes your code, easier to spot

errors)– Search google: Notepad++ site:cnet.com– At home, Notepad works if you can’t download

Notepad++

• Cnet.com – reliable host for many programs, certifies them spyware free, also offers ratings, reviews, etc.

Using FTP Software

• Many options – go to download.cnet.com/windows/ftp-software/

• I’ve used Filezilla (free), Ipswitch WS_FTP Home (free trial), Leech FTP (free), Cute FTP Home (free trial), Smart FTP…

• Current favorite is Filezilla but they all look and act almost the same – Your server will time you out after a period of

inactivity but when you ask Filezilla to upload something it will log you back in automatically.

Brief intro to FTP (Filezilla)

Connection status

Your computer

Your host

Upload/download status

Web Hosting Options

• Free options:– Check with your broadband provider—sometimes

web space is free with your account.– Tripod.com or google “free web hosting”– Look at some sites hosted on various free servers

and decide if you can live with the way they include ads.

– If you upload Notepad created HTML, free servers typically add their ad code to your HTML, which is messy if you ever wish to go to ad-free site.

Free options

• Make sure you can live with how you upload and edit files… i.e. only 5 at a time via web browser or FTP

• Many offer “WYSIWYG” editors• The “Advanced” or “HTML entry” methods are

the ones that will make use of what you’ve learned in class

• Instead of using Notepad, these sites give you a text box in a web browser. Edit your pages here, click save, and your changes go live.

Domain Names

• www.mynamehere.com, .biz, etc.

• Register a domain name for 1 year for $12 at places like godaddy.com– Discounts for bundled services, i.e. $1.99 1-yr

domain w/1-yr hosting purchase

• Internic.net contains huge list of service providers: http://www.internic.net/alpha.html

• Is your domain name taken? http://www.whois.net/

Domains & Hosting, Site Parking

• Most domain registrars (godaddy, etc.) offer hosting.

• Look for deals, i.e. free domains with 1-year hosting, etc., % off deals.

• Google: coupon codes godaddy.com

• Buy domain now, add hosting later is ok.

• I recommend GoDaddy for their very willing customer support.

Sign up for Wordpress

• Go to Wordpress.com

• Click Get Started Here

• Pick a blog address, username, password

• Email address– If you have 1 and can check it from here, use it.– If you do not have one, let me know.

• Blog Post language – en English

• Click sign up

• WRITE DOWN LOGIN AND PASSWORD!!!!

If you need to check email I set up

• https://email.secureserver.netEmail: cfk___@snotrocketscience.com

Password: Parkland

• Check your email and click the link to activate Wordpress

Check out your page

• Click visit your dashboard—we’ll look more at this later

• Click “My Blog” upper lefthand corner

• About = a page

• “Hello World!” dated blog entry

• Please be patient as we explore all of what we can do on Wordpress.

Return to Dashboard

• My Blogs Creating Webpages Dashboard

• Create a post: Posts Add New

• Make a new post, check it out on your blog

• Try out the formatting etc

• Make a link

• Add a photo or two (from what you downloaded last week)

Uses for Wordpress

• Blogging (posting by date) is the obvious use for Wordpress

• But you can use it as a “Content Management System” by using PAGES

• Change Wordpress settings to make “Home” be the 1st thing that loads:– Settings Reading A Static page Home

Create a page

• Pages Add New– Many of the same options as adding a post.– Links, images, etc.

• Create a page for each page of your site– i.e. About Me, My Pictures, Fun Facts, etc.

Sidebar Widgets

• Appearance Widgets (on your sidebar)– Drag and drop existing widgets – i.e. your twitter

feed, a grid of posts, etc. – Text will let you add some personalized info OR

HTML.

Appearance

• Change Header: Appearance Header – Can create custom image – Select a stock image to replace

• Themes: Appearance Themes – Change theme – many, many options– Pick the closest then customize– Sometimes I’m OK with this, often I get frustrated &

decide to use HTML and create from scratch

Plug-ins

• Customize additional functionality – not available on free hosted wordpress.com– Anything you can imagine:– Share on Facebook– Translate– Auto signature etc– Spam control on Comments

• Also see: – Wordpress.org– GoDaddy hosting w/Wordpress installed