In addition to the comfortable skills of formatting text and images to be printed (ink on paper), you need to know how to format text and images for the web

Mental Models

Conceptually, there are three big differences between formatting for print and for the web.

The software for web formatting gives you access to the "source code" in a useful way that Word and other word processors don't give you.

The images are separate files from the "page" and need to stay in the same file-structure relationship with the HTML file.

This is the difficult one. On the web, a document's content, structure (headings, paragraphs, placement of images) and style (look and feel) are separate and can be edited separately.

Source code

You can view the HTML code of any web page in your browser by pulling down the View menu or Page menu, depending on your browser and selecting Source Code or View Source or something to that effect. You can also right-click on any non-image part of a web page and select View Source.

What you are viewing is the simple text file that gets sent from the server to your browser. Your browser then interprets the HTML code and displays what you see in your browser.

Images

Note that the images are separate files. They are stored separately on the server, they are requested individually by the browser and sent individually by the server, and they are stored separately in your browser cache. If you "save" the web page to your desktop, the images (along with any scripts) are saved into a subfolder in the same folder with the .htm file that you saved.

Document layers

The content is the text and images that the browser displays for the user to read and look at. The text and images can be "hot" and the page can contain forms so that the user can interact with the content.

The structure is what the HTML code is all about. Every chunk of text and every image on a page is tagged with an HTML tag pair -- H for heading, P for paragraph, IMG for image.

The style, aka the presentation or the look and feel, can accompany every HTML tag. For example, if every P tag had the font, size, and color specified, then to change any of those attributes, you would have to change every tag. Just think if I wanted to change this font for Ricci Street and I had to make the change on every paragraph. Not likely!

Because the style is a separate layer of information, I can specify the font for all of Ricci Street in one place. Then all I have to do is change one line in one file -- a file that all the HTML pages link to -- in order to change the font for all of Ricci Street.

Learn more at Gizmos Toolkit Webmaking Style Sheets.

Tasks

Deconstruct a web page

Reading the web

Go up one level at toLearn.net.

Right now, you're viewing the software.htm file in the gen230/ folder. Look at the URL in your browser's address space:

http://toLearn.net/gen230/software.htm

This is a URL, uniform resource locator. The http part, hypertext transport protocol, distinguishes this protocol from others, such as ftp and smtp. The RicciStreet.net part is the domain name registered with the domain name system (DNS) to correspond to one and only one computer somewhere on the Internet. In this case, it's in North Carolina and is owned by Advanced Internet Technologies. The domain name is not case-sensitive. The rest of the URL is the file path on the hard drive on the computer in North Carolina. It uses the Linux operating system and the folder names -- dwares/lane/gen230/ -- and file name -- syllabus.htm -- are case-sensitive.

Note that the gen230/ folder is in the lane/ folder, which in turn is nested in the dwares/ folder. So let's go up one level to the Lantern Lane home page.

http://toLearn.net/index.html

View source, i.e., view the source code of this web page.

Two methods: 1) right click on open area of a web page and select View Source; 2) pull down the browser's View menu and select Source.

As opposed to, for example, a Microsoft Word file in .doc format, the source code of which is proprietary, an HTML file in .htm format is open source. This HTML source code is the text file that gets sent from the server to your computer. (The images are separate files.)

The source code tells the browser what to do. So that you can view and edit it, it will open in Notepad, the text editor that comes with Windows.

Parse the HTML - Hypertext Markup Language

All the HTML codes are between angle braces: < and >. In HTML, case doesn't matter but spelling and spacing are crucial.

We're going to isolate the parts of the HTML document index.html and then delete them until all we have remaining is the bare bones structure common to (almost) every web page.

hierarchy of a web page

The html tag pair -- think of it as a "container" -- is parent to two children: the head and the body. The head tag pair contains -- is parent to -- the title tag and various meta tags and tags to include extra information like style sheets and scripts. The body tag pair contains -- is parent to -- the headings, subheadings, paragraphs, images, and lists that display on the page n the browser.

Working backward, the stuff that displays on the page is child to the body which is sibling with the head. They are children to the html container -- some call all these containers "objects".

Construct a web page

Follow the directions, step-by-step:

Your first web page

What is HTML?

Anatomy of a Web Page

Ricci Street Gizmos Toolkit's Webmaking section