html part two - marcos.a.ojeda

workspace

viewing

html files are webpages, so your web browser is a key part of your workspace. You view your html files by opening them in Firefox or Safari or Explorer. Just find the file, wherever you saved it, and open it. See what happens.

You can even open other kinds of files on your computer in a web browser, try it! Most web browsers actually act like a minimal operating system, if you hand them some kinds of files, they will open them natively or suggest other programs that will open your file. Kinda neat!

saving

When saving your html files, you should always save them as a .html file. Emacs or Vi will happily do this without adding any additional file extensions like .txt or anything like that.

Because HTML doesn't need to be compiled like LaTeX does, you can leave your file open in Emacs while you're working, but you obviously have to save your file before you can see any changes.

editing

How you choose to edit your html files is practically irrelevant. The only thing that matters is that you remain consistent. With consistency, you gain the ability to edit your files easily and also read them later on whenever you decide to edit them.

Your best bet for editing html files is a text editor like emacs or vi. There are other editors that you can use, but it's best to not make things more complicated than they need to be. Try to focus on simplicity. The last program you want to use is MS Word.

Editing with style

You can use emacs and all those fun unixy things by opening a terminal. On a mac, the terminal lives in the utilities folder within your applications menu.

Emacs comes with every Mac and so does Vi, but emacs is probably the easiest to use. In order to get syntax highlighting working, you probably want to add the following to your .emacs file:

(global-font-lock-mode 1)

looking

It is always helpful to look at other webpages for inspiration, both code-wise and also layout wise. As of right now you have the skill to make Headings and Paragraphs. The end result is something like a new york times article without any images or banner ads.

Even though i feel it is pedagogically unsound, i have found it important in my own web design experience to immediately step away from the standard font (most often Times) that appears when you first start making web pages. The reason for this is primarily because it makes the pages appear, even if haphazardly, more professional than pages that lack that decorum.

This is a paragraph that is set in Microsoft's Verdana. When i first started doing web design, people used this font liberally because it was rounder and more approachable than Arial. It looks nice at small type sizes, but afterwards, it looks kinda silly.

This is Comic Sans MS. It has the reputation, much like the verizon logo, of being the most despised font of all time. It is used often and liberally by people who want to 'lighten up' their web pages. You can do the same if you'd like, but remember its reputation.

Those are two popular fonts, although there are others. On a mac with MS Office just installed, the average user has about 170 fonts. Without installing any fonts, the standard mac has about 63 fonts. That's a ton of fonts!

This is Helvetica. It is often rejected because everyone uses it. John Maeda said that Helvetica is like comfortable pair of jeans, which is a cute way of anthropomorphising a typeface.

Macs have an extra family called Helvetica Neue which goes from regular, to light, to ultralight.

This is a paragraph that is set in Microsoft's Arial, an eerie imitation of Helvetica. When bold and oblique, Arial makes a perfect Microsoft logo.

For most websites, you can interchange Arial or Helvetica unless you want to use 'the real deal.' At larger sizes, though, Arial looks less stylized. A superbold Helvetica is used for mbta signage.

When setting type with serifs, you have a couple of options. The first is Times (which is the default webpage font for most browsers), the second is Palatino (which should be exploited for its style) and the third is Georgia.

Times New Roman has a heritage of being a newspaper font. It looks standard, professional, plain and almost fancy enough. You don't pay much attention to it, so it helps to make sure you set it nicely.

Palatino, on the other hand, is wider, more relaxed and elegant. It typically has less characters per line than Times, which makes its use less economical, but somewhat more decadent.

This is Georgia. It was made for the screen and has text figures, numbers like 13 and 29 that line up with lowercase letters on the line. Overall, it is a little chubbier than Times or Palatino, but it is immensely more legible on the screen at any size.