The ABCs of WWW Website Basics Starting a Squadron Website.
-
Upload
jayde-arington -
Category
Documents
-
view
225 -
download
2
Transcript of The ABCs of WWW Website Basics Starting a Squadron Website.
![Page 1: The ABCs of WWW Website Basics Starting a Squadron Website.](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649d835503460f94a69046/html5/thumbnails/1.jpg)
The ABCs of WWW
Website Basics
Starting a Squadron Website
![Page 2: The ABCs of WWW Website Basics Starting a Squadron Website.](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649d835503460f94a69046/html5/thumbnails/2.jpg)
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 ??????
![Page 3: The ABCs of WWW Website Basics Starting a Squadron Website.](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649d835503460f94a69046/html5/thumbnails/3.jpg)
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: [email protected]
![Page 4: The ABCs of WWW Website Basics Starting a Squadron Website.](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649d835503460f94a69046/html5/thumbnails/4.jpg)
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
![Page 5: The ABCs of WWW Website Basics Starting a Squadron Website.](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649d835503460f94a69046/html5/thumbnails/5.jpg)
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
![Page 6: The ABCs of WWW Website Basics Starting a Squadron Website.](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649d835503460f94a69046/html5/thumbnails/6.jpg)
Website Creation Methods
DreamweaverFrontPageWYSIWYG EditorContent Management SystemHard Coded
Website Developers Preferences Unscientific Poll from a Developer’s Forum
![Page 7: The ABCs of WWW Website Basics Starting a Squadron Website.](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649d835503460f94a69046/html5/thumbnails/7.jpg)
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.
![Page 8: The ABCs of WWW Website Basics Starting a Squadron Website.](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649d835503460f94a69046/html5/thumbnails/8.jpg)
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
![Page 9: The ABCs of WWW Website Basics Starting a Squadron Website.](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649d835503460f94a69046/html5/thumbnails/9.jpg)
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
![Page 10: The ABCs of WWW Website Basics Starting a Squadron Website.](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649d835503460f94a69046/html5/thumbnails/10.jpg)
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)
![Page 11: The ABCs of WWW Website Basics Starting a Squadron Website.](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649d835503460f94a69046/html5/thumbnails/11.jpg)
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 )
![Page 12: The ABCs of WWW Website Basics Starting a Squadron Website.](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649d835503460f94a69046/html5/thumbnails/12.jpg)
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
![Page 13: The ABCs of WWW Website Basics Starting a Squadron Website.](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649d835503460f94a69046/html5/thumbnails/13.jpg)
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“>
![Page 14: The ABCs of WWW Website Basics Starting a Squadron Website.](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649d835503460f94a69046/html5/thumbnails/14.jpg)
Writing HTML
1. Test Apache Installation by going to http://localhost in your browser.
It Works!
![Page 15: The ABCs of WWW Website Basics Starting a Squadron Website.](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649d835503460f94a69046/html5/thumbnails/15.jpg)
Writing HTML
Cardinal Rule of Writing HTML:
When you open a door….
Be sure to close it!
![Page 16: The ABCs of WWW Website Basics Starting a Squadron Website.](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649d835503460f94a69046/html5/thumbnails/16.jpg)
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>
![Page 17: The ABCs of WWW Website Basics Starting a Squadron Website.](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649d835503460f94a69046/html5/thumbnails/17.jpg)
Writing HTML
Our First Page: “Hello World”
<html> <head></head> <body> Hello World </body></html>
![Page 18: The ABCs of WWW Website Basics Starting a Squadron Website.](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649d835503460f94a69046/html5/thumbnails/18.jpg)
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!)
![Page 19: The ABCs of WWW Website Basics Starting a Squadron Website.](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649d835503460f94a69046/html5/thumbnails/19.jpg)
Eclipse IDE
![Page 20: The ABCs of WWW Website Basics Starting a Squadron Website.](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649d835503460f94a69046/html5/thumbnails/20.jpg)
Publishing your WebsiteUse an FTP Tool to transfer files to the server.
![Page 21: The ABCs of WWW Website Basics Starting a Squadron Website.](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649d835503460f94a69046/html5/thumbnails/21.jpg)
Publishing your Website
Voila! You’re on the Web!
![Page 22: The ABCs of WWW Website Basics Starting a Squadron Website.](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649d835503460f94a69046/html5/thumbnails/22.jpg)
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!
![Page 23: The ABCs of WWW Website Basics Starting a Squadron Website.](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649d835503460f94a69046/html5/thumbnails/23.jpg)
Resources• Many FREE Tutorials
– http://w3schools.com – http://www.tizag.com
• Google it!– Use “html” as the first word in your google search
![Page 24: The ABCs of WWW Website Basics Starting a Squadron Website.](https://reader030.fdocuments.net/reader030/viewer/2022032705/56649d835503460f94a69046/html5/thumbnails/24.jpg)
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: [email protected]