— LESSONS: WEB DESIGN —

Oct. 27th, 2012

The Hyper-Text Markup Language


Let me show you something:

All those moments will be lost in time, like tears in rain.

Question: How do we know that that’s a sentence?


A sentence has two characteristics:

  1. it begins with a capital letter;
  2. it includes an end mark—either a period [.], question mark [?], or exclamation point [!].

Answer: It’s a sentence because it starts with a capital (A) and it uses [.] as an end mark:

All those moments will be lost in time, like tears in rain.

You know how to identify a sentence, a word, an image, etc. A computer needs guidelines to understand those elements.
An element = opening mark + content + closing mark.
A sentence element could be: sentence.open + content + sentence.closed.
A word element could be: word.open + content + word.closed.


This is how elements are written down in HTML:

If we go back to the Blade Runner sentence and you were free to name your own elements, you could construct the sentence by doing: <sentence>All those moments will be lost in time, like tears in rain.</sentence>.

Paragraphs have sentences, so you create a paragraph element with sentences in it:
<paragraph>
        <sentence>All those moments will be lost in time, like tears in rain.</sentence><sentence>Time to die.</sentence>…
</paragraph>

Chapters have paragraphs:
<chapter>
        <paragraph>
                <sentence>All those moments will be lost in time, like tears in rain.</sentence><sentence>Time to die.</sentence>…
        </paragraph>
        <paragraph>
                <sentence>…</sentence><sentence>…</sentence>…
        </paragraph>
</chapter>

You could go on endlessly with this. In HTML however, you can’t create your own elements; they are already created.

I’ll introduce certain elements, enough to be able to create a nice looking page:

Oct. 21th, 2012

Introduction - 1:1 Copying


HTML and CSS have come a long way. There are incredibly many things you can do now to make a very dynamic/interactive website.
   However, first things first: Let’s begin with a static page, a page, just like a page of a book or magazine. Images don’t move, there are no buttons, and there’s only manual navigation: flipping the pages with your fingers. But a book can be very entertaining. So can a magazine, a newspaper, or whatever other reading material. While interactivity is cool, you don’t need it for your pages to be cool. There are other things which are more important, like composition, layout, typography, color, etc. Let me show you what I mean.
   First you’ll see a close-up of the newspaper, then the same page constructed in HTML:



source: Collier’s Magazine, 1952


recreation by me


At first sight, you might think it’s really an image, but if you select the text with the mouse, you’ll see that it’s all done in HTML (obviously, the image segment is an image here as well). Imitating existing layouts is a very good way to learn HTML formatting.
   Now, wouldn’t it be cool if your webpages had this sort of design? If you would like some other typography, color, or what-e-ver, write down what you’d prefer. Take a magazine or newspaper, book, etc., and look for a page on which all your criteria are met. Can’t find one? Go to a library or bookstore and look for it. You don’t need to go all ambitious, right away, though. You could also just grab a random mag in your home, flip over to a random page and choose that. There you go!


Observing my example further, it’s clear that there are some small changes:

The original article uses an even bolder version of Times New Roman for that Man on the Moon headline. Although, I could add a custom font to the HTML—which all browsers would support—I decided not to do that, because I wanted to show you what you can do with only HTML, CSS and the main supported fonts. Collier’s Magazine was known for using Times New Roman (they use multiple fonts, now), which is the reason why I chose an article of said magazine.
   I’m not sure what’s going on with the main THE JOURNEY headline. I think it might also be a more ornamented Times New Roman font in the original—or the computer font might just not be exactly the same as the original font, but I guess that’s not true.
   There are other small things, but it’s close enough. Note that the HTML example is quite small for a webpage. This is done for comparison’ sake.

We’re going to make our own HTML layout design in another chapter. Until then: Here is another example of using HTML and CSS very stylishly—this time with custom fonts, new CSS features like:
1. the canvas option for the circle;
2. the rotate option for turning text certain degrees;
3. the shadow-text option for adding shadows to fonts.

NOTE: This might not show up correctly in Firefox. With some tweaking here and there it showed up perfectly off-line on my computer, but on-line it didn’t.


custom made FHM cover by me


FHM’s original cover


Fonts used:


CSS used:


Images used: