Class 1-1: Beginnings
Setting up your Tools for this term
Editors
We will be using Dreamweaver as our editor later in the term, but it's also important that you get familiar with a basic text editor. This will be useful if you move into PHP and other languages, but it's also good to be able to edit web pages where ever you are - and there will always be a text editor handy on any computer.
Note: Dreamweaver is NOT free, although you can get greatly reduced pricing as a student through the WWU Bookstore. Also note that almost all the computer labs on campus will provide you with Dreamweaver so you can use it on campus while you're registered as a student at WWU.
See list of some common free and not-terribly-expensive text editors.
Image Editors
Later in the term we will be editing images for the web. We will be using Photoshop and Fireworks which are available in the labs, but are fairly expensive if you buy them yourself (although a student discount helps tremendously). You can download a free copy of these for use at home, but that only lasts 30 days. Luckily there are free products available as well.
Here are some common free image editors and screen capture tools.
Browsers
Have at least two browsers available on the machine you do your work on. Browsers vary in the way they interpret html and you need to know what your users will see. At a minimum choose MS IE8 (PC only) and Firefox 3.x (Mac and PC). Google Chrome (PC only) and Safari (Mac and PC) are also popular.
You should also occasionally check the way your code looks on different platforms - Mac / PC / Linux. Find a friend with a platform you don't routinely use! Or use a cross-browser testing tool such as CrossBrowserTesting or BrowserShots or Litmus.
Tools and tool bars
Choose a toolbar and get used to using it. It will become increasingly valuable as the term proceeds. See more information about getting toolbars.
FTP utility
FTP or File Transfer Protocol is the way you move files from your computer to the web server. We will use this in class later this term, but you may want to get your home computer set up ahead of time.
You can use the FTP capability of Dreamweaver, but it's nice to have a stand-alone utility for loading your files up to the web server. Chapter 19 of our book discusses SmartFTP (Windows only). FileZilla (client) is also a popular choice. Both are free.
- SmartFTP (Windows only)
- FileZilla (client) - all platforms
Default file naming (Windows only)
From My Computer (or any folder window):
- select Tools, Folder Options
- then select the View tab
- Find the Hide Extensions for known file types under Files and Folders section
- UNCHECK the checkbox and select OK
This allows you to see whether a file is index.txt or index.htm or index.shtml - you MUST know how your files are named to know what the browser is going to do with them. In the university labs you will have to do this each time you log in. On your own computer you can set it permanently.
Keyboard Shortcuts to know
- Copy (Control-C or Apple-C)
- Cut (Control-X or Apple-X)
- Paste (Control-V or Apple-V)
Basic Concepts
- How Web Servers Work (from howStuffWorks)
- Terminology to learn
Intro to HTML
HTML is coded by using Tags with Attributes set to Values in a hierarchial structure.
Tag
<a href="new.html"></a>
The tag is marked in red above. It consists of a bracketed keyword which may contain attributes and values followed by a closing tag. The closing tag is generally the same as the tag with a "/" in front of the keyword. In this case the address link is being modeled.
Attribute
<a href="new.html"></a>
The attribute qualifies the keyword. In this case the href defines the address of the link.
Value
<a href="new.html"></a>
The value defines the attribute and is enclosed in quotes. In this case the value of the href link must be a web address.
The hierarchial structure comes in because a web page is interpreted sequentially from the first line to the last. A tag starts with its opening tag, may have other tags inside of it, then closes with a closing tag.
Doctype & HTML Skeleton
We will be using Strict Doctype in the XHTML Namespace for this class. Note that the webpages for this class are NOT Strict type and in fact break some rules for Transitional. Some day I will clean these up, but you will avoid this problem by starting out in Strict!
Copy and Paste this handy skeleton into the text editor of your choice when hand coding your pages:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>My Web Page Title</title>
</head>
<body>
</body>
</html>
Resources while doing your homework
- Basic tag tutorial - covers paragraph, headers, various lists, basic link, image, title, head/body
- Tutorials and hands-on practice: w3schools.com
- Differences between Strict and Transitional DTD