Web Fundamentals

by M. Douglas Wray

Click here, Press → key to advance.

M. Douglas Wray

What We'll Cover

  • FTP - why it should be the first tool in your web developer toolbox.
  • HTML basics, writing and understanding elements of a webpage.
  • Cascading Style Sheets (CSS) and how they control presentation.
  • Javascript - its role in user interaction and why it matters.
  • Flash and it's proper usage. The ups and downs of using it.
  • PHP and ASP will be discussed in very general terms with an eye toward use of dynamic pages and Content Management Systems.

But first, some background...

Basics of how the web works and how your website fits into the big picture.

Basic HTML pages: "Flat website"

The mechanics of a webserver.

Basic HTML pages: "LAMP website"

The mechanics of a LAMP website.

FTP - File Transfer Protocol

  • Used to move files to and from your host.
  • Better tool integration = greater ease of editing site.
  • Tight integration with text editor = Productivity.
  • Web-based tools can be slow/inefficient.
  • High-end tools are faster have useful features.
  • Can be used to change file permissions.

FTP for Mac

  • Cyberduck - Free - Link
  • Fetch - Free - Link
  • FileZilla - Free - Link
  • Transmit - $34 - Link
  • Interarchy - $59.99 / $21 Limited Time - Link

FTP for PC

  • SmartFTP - Free - Link
  • FileZilla - Free - Link
  • FTP Explorer - $35.99 - Link
  • WS FTP - $54.95 - Link

FTP and Workflow

Where FTP fits in the workflow.

WYSIWYG Editor Pros/Cons

  • What you see is what you get (almost)
  • One tool does it all (mostly)
  • Usually has FTP built in (friendliness varies)
  • Free ones aren't too bad. (worth it)

Some WYSIWYG editors

  • Dreamweaver (Mac & PC) - often a starting point for beginners. Has some issues with preview. $300
  • MS Expression Web - standards-compliant. $125
  • Flux (Mac) - fast and powerful, good CSS support. $75
  • SeaMonkey - (all) - meant to be all-in-one application. Free
  • KompoZer - (Mac) - complete authoring system. Free

Plain-text Editor Pros/Cons

  • Gives you complete control (OMG! It's full of code!)
  • Small applications and (usually) start up quickly.
  • Text is text - platform/app irrelevant. (sharing files?)
  • Context-hightlighting/coloring helps.
  • Auto-sense helps you get tags right.

Plain-text editors

  • Komodo (All) - clean, lean, platform optimized. Free (link)
  • Notepad++ (PC) - solid and efficient, well-built. Free (link)
  • TextWrangler (Mac) - No-budget excellence. Free (link)
  • TextPad (PC)- venerable and stable. $27 (link)
  • SubEthaEdit (Mac) - Good collaboration. $42 (link)
  • BBEdit (Mac) - My personal choice. $49.99 (link)
  • CoffeeCup (Mac & PC) - platform optimized. $69 (link)

HTML Basics

HTML is a ‘markup’ language. It consists of 'Tags': <b>This is bold</b> - looks a lot like the pre-WYSIWYG wordprocessor ‘WordStar’. Browsers interpret and ‘present’ the markup code. Tags generally ‘open’ and ‘close’ – except for single-element tags like <img> and <hr>. Images and link paths can be ‘absolute’ or ‘relative.’ For many years HTML page design was done using the <table> tag – in the last decade CSS (Cascading Style Sheets) support in browsers has improved to where object-oriented design techniques can be used, separating design from content and allowing site-wide design changes with minor edits.

HTML Page Elements

  • DOCTYPE – Rendering rules for HTML
  • HTML – Beginning of hypertext
  • HEAD – Title / Links / Scripts / Meta
  • BODY – The visible content of the page

Anatomy of an HTML page - code 

<!DOCTYPE html> <!-- HTML 5 -->

<html>

    <head>

        <title>Page Title</title>

        <link rel="stylesheet" href="/resources/my_styles.css" media="all">

        <script src="/resources/js/my.js" type="text/javascript" language="javascript"></script>

        <meta name="keywords" content="dog, cat, bird, mouse, platypus">

    </head>

    <body>

        <div id="pagewidth">

            <div id=”banner">Page Banner</div>

            <div id="wrapper">

                <div id="twocols">

                    <div id="maincol">Main Content Column</div>

                    <div id="rightcol”>Right Column</div>

                </div>

                <div id="leftcol">Left Column</div>

            </div>

            <div id="footer">Footer</div>

        </div>

    </body>

</html>

Anatomy of an HTML page - design

How the code renders.

CSS – Cascading Style Sheets

Definitions of STYLES for HTML Elements

Rather than:
<p><font size=“3”>Doo Dah</font></p>

(as inline style) <p style=“font-size:12px;”>Doo Dah</p>
(as line in stylesheet) p { font-size:12px; }

CSS Cheat Sheet

My favorite CSS Cheat Sheet.

Javascript

JavaScript is an object-oriented scripting language used to enable programmatic access to objects within both the client application and other applications. It is primarily used in the form of client-side JavaScript, implemented as an integrated component of the web browser, allowing the development of enhanced user interfaces and dynamic websites. - Wikipedia

Javascript Common Uses

  • Form validation
  • Popups
  • Hide/show page elements
  • Image rollover swaps
  • HTML5 Canvas programming

Javascript - Where it lives

  • The <head> portion of a document
  • An externally-referenced file
  • The <body> portion of a document
  • A command within a tag (MouseOver)

Javascript Frameworks

  • There are MANY
  • JQuery is a very popular one. (link)
  • Does animation and performs event handling. (demos)
  • Built into WordPress core

Flash

Allows presentation of scalable, vector-based information. Many advantages but not intended as primary construction tool. Drawbacks are:

  • Bookmarking not supported – navigation is programmatic.
  • Requires an add-on to the browser - can be an issue.
  • Complex animations can run slowly / jerky.

Flash is great for showing animated content
but adds complexity if used for entire site.

Dynamic Content - PHP and ASP

PHP – Hypertext Preprocessor – a language designed to create HTML using programming logic

ASP – Active Server Pages – the Microsoft version of PHP.

Information Architecture

  • The blueprint that describes how info is structured.
  • The relative position of files and folders.
  • The ‘concept’ behind your navigation.
  • Server-side Directives can help simplify coding.

Learning Resources

HTML Tutorial
HTML Reference
HTML Validator
HTML Cheat Sheet
CSS Tutorial
WestCiv CSS Guide
CSS Cheat Sheet
CSS Layouts Step-by-step
Javascript Tutorial
Cheatsheets (all) .zip

Tools

4096 Color Wheel
CSS Creator
Little Boxes
HTML Entities - Special Characters
Firebug - Firefox add-on
Stu Nicholls - TONS of demos

Content Management Systems

WordPress.com – try out WordPress
WordPress.org – do-it-yourself
WordPress.tv – conference and how-to vids
BDA Courses – go beyond the basics

Questions?

M. Douglas Wray
macwebguru.com
macguiguru@spamcop.net