Website 101


Published on

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

Published in: Technology, Business
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Website 101

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