Create Your Own Webpage

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 host Your computer 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.net Email: 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

Create Your Own Webpage