1. The ABCs of WWW Website Basics Starting a Squadron Website

2. Agenda Your Presenter Methods of creating a Website Definitions Requirements for Low Level Development Setting up a Development Environment Writing Some HTML with Notepad Integrated Development Environment Create a simple Webpage with Eclipse Publishing your website Making your website “Pretty” and “Functional” Resources Questions All in 45 minutes ??????

3. Your Presenter: 1 st Lt Leo Benchich IT Officer for Livonia Thunderbolt Composite Squadron (GLR-MI-183) IT Officer for SE Michigan Group 705 (GLR-MI-705) Technician Rating in Information Systems Specialty Track Joined CAP March 2009 Private Pilot (Oct 2008) Computer Programmer since 1984 Web Developer since 1998 Degree in Information Systems (2001) Email: leobenchich@yahoo.com

4. Methods Several different ways to create a website Content Management Systems (CMS) – Pros: » Easy (fill out a form, cut/paste images) » Little or no cost – Cons: » Must use one of their “canned templates” » Limited number of Templates » Static sites » Don’t receive a true domain name (mysite.usersites.godaddy.com) » Limited options (Messageboards, shopping carts, scripting, etc) » No or limited access to source code – Example » Joomla Website Builders – Pros: » Fast » WYSIWYG – Cons » Cost » Learning curve » Bloated source code – difficult to debug and enhance – Example » DreamWeaver » FrontPage

5. Methods Several different ways to create a website (cont.) Low Level Development – Pros: » Total control over entire website » Many Free Tools » Can use multiple disciplines (Javascript, PHP, PERL, jQuery) » Easy to add Database functionality » Most Opportunity to be Flexible and Creative – Cons: » Learning Curve » Requires some programming skills

6. Website Creation Methods Website Developers Preferences Unscientific Poll from a Developer’s Forum

7. Definitions Domain Name - – The Address for your website (www.mywebsite.com)www.mywebsite.com – Paid for yearly and you need to register them SubDomains – “Piggy-back” off a domain (www.mysquadron.mywebsite.com)www.mysquadron.mywebsite.com – No cost for mulitple subdomains under a domain.

8. Definitions Subdomains as it relates to MI Wing – MI Wing has a domain (www.miwg-cap.org) – Paid for by MI Wing – Squadrons can “piggy-back” off MI Wing (mi183.miwg-cap.org) No Cost to Squadron Contact Wing ITO to set up

9. Definitions Domains/Subdomains as it relates to MI Wing – Squadrons may purchase a Domain Name at their own expense. – A purchased domain name can be mapped to a subdomain. Example : www.livoniacap.orgwww.livoniacap.org = www.mi183.miwg-cap.orgwww.mi183.miwg-cap.org

10. Definitions Web Host – A Company that specializing in hosting Websites – Monthly or Annual cost depending on Plan Type Functions – Provide “webspace” for building your site – Provide email accounts – Additional functionality Message Boards/Blogs Shopping Carts Programming options (Scripting (PHP, Perl, CGI), Database (MySQL, MSSQL)

11. Definitions Web Host – MI Wing – MI Wing uses a company called – MI Wing covers the cost Other Definitions – FTP – File Transfer Protocol – HTML – Hypertext Markup Language – CSS – Cascading Style Sheets – Javascript – a scripting language, runs mostly on the client machine – Localhost – The “Home” page/address of a locally installed Webserver (http://localhost )http://localhost

12. Requirements A Development Computer My Laptop Local Webserver Software Apache Web Server* Editor Notepad Many HTML Editors* Eclipse * FTP Client WS FTP LE* Coffee Cup* FileZilla* Web Host to publish your site Dreamhost Conf2011 Subdomain already Set Up *Available for Free on the Internet

13. Procedure 1.Install Apache 2.Check your Apache configuration to find out where your “root” webserver directory is. (i.e. “C:\apache\htdocs”). The Apache configuration file is “C:\apache\conf\httpd.conf” These two entries define for “root” directory for your local webserver: DocumentRoot "C:/Apache/htdocs“

14. Writing HTML 1.Test Apache Installation by going to http://localhost in your browser.http://localhost It Works!

15. Writing HTML Cardinal Rule of Writing HTML: When you open a door…. Be sure to close it!

16. Writing HTML Opening Tags & Closing Tags Tag elements can be NESTED Can include Javascript and CSS <!-- The head area is for declaring: Javascript and CSS --> function myfunc(){ alert(“This is my function”); } h1 {color:red} This is a header This is the body of the page Click here

17. Writing HTML Our First Page: “Hello World” Hello World

18. Integrated Development Environment A Programmers Tool Written by Programmers for Programmers User Community Supported (Open Source) Highly Customizable Easy to install and use FREE! (On Session Handout Disk!)

19. Eclipse IDE

20. Publishing your Website Use an FTP Tool to transfer files to the server.

21. Publishing your Website Voila! You’re on the Web!

22. Make it Pretty and Functional Add Color – HTML: a Header – CSS: a Header Add Pages – Anchor Links to Local Pages: click here for example 1 – Buttons (note no closing tag!) Add Links – Same as Add Pages, but use entire web address click here for E-Services Find what you want and “borrow” it – Web Developers Best Trick – Find a website that has what you want and copy it! (or at least use it as a foundation) In your Browser, click Tools->View Source Be mindful of copyrighted material!

23. Resources Many FREE Tutorials – http://w3schools.com http://w3schools.com – http://www.tizag.com http://www.tizag.com Google it! – Use “html” as the first word in your google search

24. Additional Training Opportunity Extended Session on this topic – Subjects: Apache Configuration PHP MySQL Data Entry Forms Dynamic Web pages – A Saturday Event (approx 6 hours) – Probably held at ARB – Date TBD If interested, Leave your name and email contact with me after this session (Signup Sheet) OR Email: leobenchich@yahoo.com

25. QUESTIONS??? Contact Info: – Email: leobenchich@yahoo.com