website 101
DESCRIPTION
This presentation was developed to give people who do not have a lot of experience with technology a basic understanding of today's website technologies and how they work. Learn more at http://www.helpeverybodyeveryday.comTRANSCRIPT
Website 101
Circa 1991
• HTML is Born• HTML is the language (Code) used to create
websites
The words between < and > are known as HTML Tags
How HTML Works
• HTML Files (file.html, file.htm) hold all the information about the look and content of a website.
• These files are located on computer running server software (a.k.a. the server).
• A web browser sees this code and shows the user a webpage.
• The user’s computer does the thinking needed to perform this operation
One HTML File = One Website Page
Websites in HTML have Multiple Files (Pages)
Index.html
myhobbyies.htm Mycat.htm Mydog.htm mywife.htm
The main page is always called “index”
A Corporate Site Built In HTML Could have Hundreds of Files
(Pages)
HTML files are “Static”
• That Means they Don’t Change Until You– Change the code of the file– Upload the new file to the server
• Firms would hire a “webmaster” if they needed frequent updates to their website.
Example HTML Code<html><head><metacontent="text/html; charset=ISO-8859-1" http-equiv="content-type"><title></title></head><body style="color: rgb(0, 0, 0); background-color: rgb(51, 51, 255);" alink="#000099" link="#000099" vlink="#990099"><table style="text-align: left; width: 100%;" border="0" cellpadding="2" cellspacing="2"><tbody><tr><td></td><td></td><td></td></tr><tr><td></td><td style="text-align: center;"><big><big><big>HelloWorld</big></big></big></td><td></td></tr></tbody></table><br></body></html>
This is What You See
Each HTML File has Two Major Parts
• <Head>– Defines rules and provides information about
the page
• <Body>– Content and Design
Search Engines Use The Head to Help Identify the Purpose of the
Page• The <Head> includes <Meta> and other
HTML Tags that Tell Search Engines important Information Like– Description of the Page– Keywords on the Page– Title of the Page
But there are problems
• Average Joes can’t write code
• Websites built by programmers don’t look so hot
The First Major Evolution
“What You See is What You Get” Editors (WYSIWYG) Invented
• These programs help people build websites visually
• The program writes the code• Webpages can now be built by designers (who
understand the basic concepts of HTML.)
Two Major WYSIWYG Programs Emerge
• Macromedia Dreamweaver (1997)
• Golive Cyberstudio (1996)
You Also Need A Graphics Program to Create the Visuals For
Your Website• WYSIWYG Editors don’t make graphics• The most widely used graphics program is Adobe
Photoshop.
Adobe Bought GoLive and Macromedia and Put Out
Adobe Dreamweaver in 2007
Next Big Web Evolution
Standards and CSS
A Group Was Formed to Develop Website Standards
• W3C – The World Wide Web Consortium
• They Develop Web Standards and Guidelines
W3C Looked for Ways to Improve Consistency
• They create Cascading Style Sheets (CSS) in 1996
• CSS is designed primarily to enable the separation of document content (written in HTML) from document presentation, including elements such as the colors, fonts, and layout.
CSS Files Tell HTML Files How To Look
CSS File
Turn Blue!!!!OK CSS File, Whatever You Say!
HTML File
One CSS File Can Control the Layout of The Whole Site
CSS File
All of You Pages Turn Blue!!!!
OK CSS File, Whatever You Say!
HTML File HTML File
HTML File HTML File
This is why CSS files are often referred to as a “template”
W3C Also Wanted Information on the Page to Be Categorized by
Importance
• They created <h1> tags for the most important information on a page.
• Tags include <h1> to <h6> and <p> for paragraphs.
• Now search engines can have an understanding of the hierarchal importance of the information on the page.
W3C Also Wanted Disabled People and Search Engines to Know What
Pictures Were on the Page
• They require each picture to have an <alt> tag that describes the picture.
• Now search engines know that a page full of cat pictures is about cats.
If Your Code Adheres to W3C Standards that Means it
“Validates”
Next Web Evolution
Scripting and Dynamic Sites
As Websites Got Better They Required Better Technology
• So People Developed Scripting Languages to Augment the Abilities of HTML
• Augmented with these Scripting Languages, websites could do much more
Three Major Scripting Languages Emerge in the Late 90s
• Active Server Pages (Microsoft)
• Java Server Pages (Sun Microsystems)
• PHP: Hypertext Preprocessor, known as “PHP” (The PHP Group)
• All three scripting languages do the same thing
But Some of These Languages Brought Use Restrictions
• Microsoft said to use ASP, you had to use their server
• Sun said if you wanted to use JSP, you had to use their server
• PHP Group said you can use PHP with any server you want
• Guess what the most popular scripting language is….
You can Tell What Scripting Language is Used By the File
Name
• filename.asp = Active Server Pages File
• filename.jsp = Java Server Pages File
• filename.php = PHP File
Scripting Languages Make the Webserver Do Some Thinking as Well (why its called “Server Side Scripting”)
Example Code (We’ll Use PHP as our example)
<?php phpinfo(); ?>
What You See
Scripting Languages are Much Smarter than HTML
• Allows the transfer and processing of information between client (user) and server. (Example: Purchasing a Ted Trauner book on Amazon.com)
• Can connect and interact with databases
• Can create files on the fly (Example: Contact database exports your search to an Excel file)
One PHP File Could Act as Many Different Webpages
Index.php
= Index.html
Mycat.html Mydog.html mywife.html
Say What?
Let’s Look at this in Detail…
A PHP file doesn’t need to have design or content in it. It is
essentially naked.
Index.php
I feel so ashamed!
Since PHP can connect to a database and CSS file, it can be told
what to say and what to look like.
CSS File
Index.php
Database
When You Click a Link on the page, it changes into the page you want
to see. That’s why its called “dynamic”
Index.php
Both pages are Index.php
The two different webpages are coming from the same file.
Think About This Concept for a Second. Its important.
How Do You Control This Process?
If You Add Another PHP File to Control the Information in the Database, You Have What’s
Known as A Content Management System (CMS)
CSS File
Index.php
”Backend.php”
A CMS includes a Database and a Webpage used to Update the
Database
There Are Many Different Types of Databases You Can Connect to
Websites• Microsoft SQL (SQL=Structured Query
Language)• MYSQL (My Structured Query Language)• PostgreSQL• SQLite• Microsoft Access• Interbase• Filemaker• DB2
About These Databases
• They can hold information, instructions, text, etc. (i.e. Content)
• They are also relational, meaning they can make connections between different sets of data.
• They typically require specific database server software (except Microsoft Access)
• Some require specific scripting languages
The Page that Controls the Database is referred to as the
“Backend” or an “Administration Page”
Most “backends” include Word Processing features (i.e.
WYSIWYG) to help you create and update content
They May Also Allow You To Schedule When Content Appears
on Your Site.
Security Features in Backends Help Multiple Users Work Together
to Update Content
Now Anybody Can Update the Content of a Website
This creates a flurry of new websites called “blogs.”
CMS Puts “Webmasters” Out of Work
CMS Software Comes in Many Varieties
• Custom Made
• Free/Open Source
• “Off the Shelf” (Pay for Once)
• Software as Service (Pay Per Month)
Each CMS is built in a specific scripting language and requires a
specific type of database
A Large Majority of Corporate Websites Now Have Content
Management Systems
Next Web Evolution
XML
Some Felt HTML was Getting Too Old and Rigid
• HTML has predefined Tags
• Developers wanted a way to define their own tags
• W3C creates XML (Extensible Markup Language) in 1998
• XML provides a way to define tags and the structural relationships between them.
XML Allows Websites to Be More Interactive
• People use XML in various ways
• AJAX (shorthand for asynchronous JavaScript and XML) is a group of interrelated web development techniques used on the client-side to create interactive web applications or rich Internet applications.
Google Uses Ajax to Create a Web Based Email Program that Works
Like Desktop Email Programs
XML Gets Into Everything
• Microsoft adopts XML for new Microsoft Office Format (.docx)
• Sun and Apple adopt XML for their documents as well
XML Also Provides New Ways to Deliver Content
• RSS (Really Simple Syndication) is a XML-Based technology used to publish frequently updated works—such as blog entries, news headlines, audio, and video—in a standardized format.
• RSS Files are known as “RSS Feeds,” but typically end in “.xml”
• Feeds are created automatically by the Content Management System
Many Websites now have RSS feeds that push their website
content to users
Visitors Can Subscribe to Get an Email Whenever You Post New
Information on Your Site
RSS is also the Driving Force
Behind Podcasts
RSS Feeds Can Be “Syndicated”
Why Would People Want This?
• Other sites syndicating your content means that more eyes will see your content
• Syndication will drive traffic to your site
Website 101 Final Exam!!!!!
1. What is the real difference between a website that is “static” and one that is “dynamic”?
2. How is editing a website in a WYSIWYG editor, like Dreamweaver, different from editing a website in a content management system?
3. What is the difference between a “CSS file” and a “template”?
Website 101 Final Exam!
4. Why is PHP the most commonly used website scripting language?
5. What is the benefit of having a RSS feed on your site?
6. If you substituted your CSS file with a different CSS file, what would happen to your site?
7. In which places can you store website “content”?
Website 101 Final Exam!
8. What is MYSQL?
9. Why would CMS put webmasters out of business?
10.What is W3C?
Website 102 Topics
• How Search Engines Work
• Website Analytics
• Search Engine Optimization
• Advanced CSS
• Flash and Flex
• Webservers
• How Open Source Works