Click here, Press → key to advance.
Basics of how the web works and how your website fits into the big picture.
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.
<!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>
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; }
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
Allows presentation of scalable, vector-based information. Many advantages but not intended as primary construction tool. Drawbacks are:
Flash is great for showing animated content
but adds complexity if used for entire site.
PHP – Hypertext Preprocessor – a language designed to create HTML using programming logic
ASP – Active Server Pages – the Microsoft version of PHP.
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
4096 Color Wheel
CSS Creator
Little Boxes
HTML Entities - Special Characters
Firebug - Firefox add-on
Stu Nicholls - TONS of demos
WordPress.com – try out WordPress
WordPress.org – do-it-yourself
WordPress.tv – conference and how-to vids
BDA Courses – go beyond the basics
M. Douglas Wray
macwebguru.com
macguiguru@spamcop.net