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:1st 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

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

DreamweaverFrontPageWYSIWYG EditorContent Management SystemHard Coded

Website Developers Preferences Unscientific Poll from a Developer’s Forum

Definitions

• Domain Name -– The Address for your website (

www.mywebsite.com)– Paid for yearly and you need to register them

• SubDomains – “Piggy-back” off a domain (

www.mysquadron.mywebsite.com)– No cost for mulitple subdomains under a domain.

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

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.org = www.mi183.miwg-cap.org

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)

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 )

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 Apache2. 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“<Directory "C:/ Apache/htdocs“>

Writing HTML

1. Test Apache Installation by going to http://localhost 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

<html><head><!-- This s a comment enclosed in opening and closing comment tags --> <!-- The head area is for declaring:

Javascript and CSS--> <script type=“text/javascript”>

function myfunc(){ alert(“This is my function”);}

</script> <style type=“text/css”> h1 {color:red}

</style></head><body> <h1> This is a header </h1> This is the body of the page <br/> <a href=‘javascript:myfunc();’>Click here</a></body>

</html>

Writing HTML

Our First Page: “Hello World”

<html> <head></head> <body> Hello World </body></html>

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 WebsiteUse 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: <h1 color=“red”> a Header </head>– CSS: <h1 style=“color:red”> a Header </head>

• Add Pages– Anchor Links to Local Pages:

• <a href=“ex1.html”>click here for example 1 </a>

– Buttons• <input type=“button” onclick=“location.href=‘ex1.html’ ” text=“click here for example1”> (note

no closing tag!)

• Add Links– Same as Add Pages, but use entire web address

• <a href=“www.capmembers.com”>click here for E-Services</a>

• 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

– http://w3schools.com – http://www.tizag.com

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

OREmail: leobenchich@yahoo.com

QUESTIONS???

• Contact Info:– Email: leobenchich@yahoo.com