Website Development

An Introduction

John N King / @JohnNKing

How the Web Works



→

URL

http://www.example.com

←

Document

<html>...</html>


HTML

  • Specially formatted text
  • Provides the structure of a webpage
  • Instructions to a web browser
  • An industry standard
  • Contains tags 
    

<h1>Heading</h1>
<p>Paragraph text</p>
<a href="#">Linked text</a>
<img src="https://www.johnnking.com/slides/webdev/img/browser.png">
  • jsfiddle.net

HTML Document



<!doctype html>
<html>
    <head>
        <title>Title</title>
    </head>
    <body>
        <h1>Heading</h1>
        <p>
            Sample Article Text
            <a href="https://www.johnnking.com">Link</a>
            <img src="img/computer.png">
        </p>
    </body>
</html>

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
    (WordPress.com, 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

Skillsets

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

Other Things

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

THE END

John N King / @JohnNKing

Senior Web Developer
SUNY Geneseo

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