Website Development

An Introduction

John N King / @JohnNKing

How the Web Works





  • Specially formatted text
  • Provides the structure of a webpage
  • Instructions to a web browser
  • An industry standard
  • Contains tags
    <p>Paragraph text</p>
    <a href="#">Linked text</a>
    <img src="">

HTML Document

<!doctype html>
            Sample Article Text
            <a href="">Link</a>
            <img src="img/computer.png">


Try to "view page source" in your browser

Components of a Web Page

May be stored as separate files or embedded within HTML

  1. Documents (HTML)
  2. Images (JPG, PNG, GIF)
  3. Styling (CSS)
  4. Scripts (JavaScript)
  5. Flash / Java Applets / ActiveX / Silverlight

Try DevTools (F12 key)

Server-Side Scripting

  • Generates HTML on request
  • Reduces duplication
  • Often used in conjunction with a database
  • Can enforce access controls
  • Languages
    • PHP
    • JSP (Java)
    • Python
    • Ruby
    • ASP.NET
    • ...and many, many more

Web Solution Stacks

  • A combination of software that plays well together
  • Example:
    • Linux Operating System
    • Apache HTTP Server
    • MySQL Database
    • PHP

Content Management Systems (CMS)

  • Website Builders
    (, SquareSpace, Wix, Webs, Weebly)
  • Open Source CMS
    (WordPress, Drupal, Joomla)

Basic Site Setup

  • Choose a Website Builder
  • Buy a theme
  • Buy stock photos
  • Register a domain name
  • Buy an SSL certificate (maybe)
  • Total Cost: <$500 per year


  • Information Architecture
  • Visual Design
  • Web Development
  • System Administration

Other Things

  • HTML5
  • Responsive Design
  • Meta Tags
  • Google Analytics & Webmaster Tools
  • Other Trends


John N King / @JohnNKing

Senior Web Developer
SUNY Geneseo

Thanks to:
Hakim El Hattab for reveal.js for images