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>Hello
World</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!!!!!
What is the real difference between a website that is “static” and one that is “dynamic”?
How is editing a website in a WYSIWYG editor, like Dreamweaver, different from editing a website in a content management system?
What is the difference between a “CSS file” and a “template”?

Website 101 Final Exam!
Why is PHP the most commonly used website scripting language?
What is the benefit of having a RSS feed on your site?
If you substituted your CSS file with a different CSS file, what would happen to your site?
In which places can you store website “content”?

Website 101 Final Exam!
What is MYSQL?
Why would CMS put webmasters out of business?
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

http://www.helpeverybodyeveryday.com	47
http://www.slideshare.net	6
http://helpeverybodyeveryday.com	1
http://www.inslices.com	1
http://www.webgeekstudio.com	1

Website 101

by mhan7474

Accessibility

Categories

Upload Details

Usage Rights

5 Embeds 56

Statistics

Website 101 Presentation Transcript

Website 101

by mhan7474

Accessibility

Categories

Upload Details

Usage Rights

5 Embeds 56

Statistics

Website 101 Presentation Transcript

Let LinkedIn power your SlideShare experience

Let LinkedIn power your SlideShare experience

Customize SlideShare content based on your interests

Keep up to date when your LinkedIn contacts post on SlideShare