UploadLanguage (EN)Support
BusinessMobileSocial MediaMarketingTechnologyArt & PhotosCareerDesignEducationPresentations & Public SpeakingGovernment & NonprofitHealthcareInternetLawLeadership & ManagementAutomotiveEngineeringSoftwareRecruiting & HRRetailSalesServicesScienceSmall Business & EntrepreneurshipFoodEnvironmentEconomy & FinanceData & AnalyticsInvestor RelationsSportsSpiritualNews & PoliticsTravelSelf ImprovementReal EstateEntertainment & HumorHealth & MedicineDevices & HardwareLifestyle
Upload
Sign in
⭐️ Matt Handal ⭐️, profile picture
Uploaded by⭐️ Matt Handal ⭐️
PPT, PDF1,767 views

Website 101

The document provides an overview of the evolution of web development, detailing the transition from static HTML to dynamic websites utilizing scripting languages like PHP and content management systems (CMS). It explains how standards from organizations like W3C led to innovations such as CSS for styling and XML for defining new tags, enhancing website functionality and interactivity. Additionally, it covers the role of WYSIWYG editors and the significance of RSS feeds for content syndication and user engagement.

Technology◦Business◦
Downloaded 45 times
1 / 77
2 / 77
3 / 77
4 / 77
5 / 77
6 / 77
7 / 77
8 / 77
9 / 77
10 / 77
11 / 77
12 / 77
13 / 77
14 / 77
15 / 77
16 / 77
17 / 77
18 / 77
19 / 77
20 / 77
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=&quot;text/html; charset=ISO-8859-1&quot; http-equiv=&quot;content-type&quot;><title></title> </head> <body style=&quot;color: rgb(0, 0, 0); background-color: rgb(51, 51, 255);&quot; alink=&quot;#000099&quot; link=&quot;#000099&quot; vlink=&quot;#990099&quot;> <table style=&quot;text-align: left; width: 100%;&quot; border=&quot;0&quot; cellpadding=&quot;2&quot; cellspacing=&quot;2&quot;> <tbody><tr><td></td><td></td><td></td></tr><tr><td></td><td style=&quot;text-align: center;&quot;><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