- File
- New
- HTML Document
- "Insert DOCTYPE" (so browsers know what version you are using)
- "HTML", "Head", and "Body" (so it inserts the basic tags for the skeleton)
- and "Create New Document"
This is where we'll start talking about HTML, the underlying markup language used to create web pages. Even if you've written HTML pages before, you'll need to pay attention to the lecture and to the readings. Our goal is for you to get good at writing clean, standards-compliant, and cross-platform HTML code. The discipline of focusing our attention on the code rather than on the content can be a useful exercise, no matter the level of my previous training and experience.
You have probably noticed by now that I keep talking about "HTML and CSS." HTML (HyperText Markup Language) is mostly about content, and CSS (Cascading Style Sheets) is mostly about presentation. Separating presentation from content is a major lesson learned by the IT community over the past decades; separating presentation from content turns out to be a really good idea.
Separating presentation from content provides benefits like writing the content just once, and then being able to apply different presentation rules for different display media to reuse the same content over and over again in different display contexts. Separating presentation from content provides benefits like writing the presentation rules for a whole site once, and then being able to reuse the same presentation rules over and over in the same display context. Good separation of presentation code from content code saves a lot of work, which is why both HTML and CSS exist as separate standards to learn.
The text editor that we use in class is called BBEdit. BBEdit has very good built-in tools for HTML markup and validation. If you use the PCs in our labs, the programmer's text editor installed on them is called UltraEdit.
Regardless of what you use to create your code, you should always run your HTML pages through the validation service provided by the World Wide Web Consortium (W3C) before submitting them for grading. That is the validator I will use to check your Web pages.
Please read the Introduction, and Chapters 1-4, 6 and 7 of HTML for the World Wide Web with XHTML and CSS.
It took some time for standards to take hold in the HTML world, but HTML version 3.2 was the first to be more or less fully supported by pretty much all versions of all browsers for all platforms. The last version of the HTML spec to be as widely supported was HTML version 4.01. The W3C has been urging a shift in browsers to support of XHTML, which "has the same expressive possibilities as HTML, but a stricter syntax[…] XHTML is an application of XML."
Thankfully, it is not as confusing as all this sounds at first, once you know the details.
HTML version 4.01 (Strict) is supported by pretty much all but the oldest of browsers on all platforms. Looking at the statistics for a popular online information site as I write this, I find around eighty-some percent of the "unique visitors and browser statistics" over the past twenty-four hours would support pages written in HTML version 4.01 (Strict).
To make life even easier for you, the differences between HTML version 4.01 (Strict) (which pretty much everybody's browser supports) and XHTML 1.0 (Transitional) (which only just over fifty percent of the browsers visiting that site support) are minor. In this class we will focus on writing HTML version 4.01 code, but we will look at what you would need to do to make it XHTML from time to time.
We will assume you are working on this using BBEdit in the IMM Lab, but the operations are pretty much the same on any HTML-aware programmers' editor on any platform. Let's walk through how you would create a "skeleton" for a web page, ready for you to add real body-content (stuff in between where you see <body> and </body> below) to create a real web page.
Step-by-step, here is the process using BBEdit:
At this point, you are going to add three meta-tags to our skeleton:
For example, you can easily add the "author" meta-tag in BBEdit by:
At this point, your document should look something like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="author" content="Your Name">
<meta name="description" content="Text describing your page">
<meta name="keywords" content="keywords,or phrases,separated,by,commas">
<title>Title for Your Page (Context)</title>
</head>
<body>
</body>
</html>
Now comes the fun part with BBEdit (and other ftp/sftp-aware programmers' editors). Let's save this to your www directory on grace.rit.edu (remember setting up that directory last week?)
There we are at the end of our first HTML-creation exercise, with a nice template we can re-use all quarter. When you want to use it, just select "File", then "Open From FTP/SFTP", use the dialog box to navigate to your directory on grace, and load the file. If you have loaded the file from a server, then the normal save keystrokes (hold down the ⌘ key and hit the "S" key in BBEdit) will save to the server rather than to a local file. When you select "File" then "Open Recent" you will find both local and remote file listed.
• Important Security Notes •
