The ABCs of WWW Website Basics Starting a Squadron Website

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 ??????

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)

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

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

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

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

Definitions Subdomains as it relates to MI Wing – MI Wing has a domain ( – 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

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 : =

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 accounts – Additional functionality Message Boards/Blogs Shopping Carts Programming options (Scripting (PHP, Perl, CGI), Database (MySQL, MSSQL)

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 ( )

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

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“

Writing HTML 1.Test Apache Installation by going to in your browser. It Works!

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

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

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

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!)

Eclipse IDE

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

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

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!

Resources Many FREE Tutorials – – Google it! – Use “html” as the first word in your google search

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 contact with me after this session (Signup Sheet) OR

QUESTIONS??? Contact Info: –