How to Create Your Own WebsiteLecture 4: Pages to Sites.

Today’s Lecture:

Extending a site to more than one page. Giving multiple pages the same look and feel.

Frames. Server-side includes. The <base> tag.

Navigation What makes navigation “good”. How to design a navbar.

Organizing your data. Lists Tables Comments

Your site revolves around your users A good navigation caters to the users. So you have some content. What would a user like to learn from it? What would a user like to do with it?

Users are purpose-driven. They come to your site wanting to do something: to learn, conduct business, or store

their own information. Once they do it, they’ll leave; mission accomplished.

▪ (But they’ll leave satisfied, and will be more likely to return in the future). You must identify what your users are looking to do when they visit your site, then to

structure it to make that action as easy as possible. Good sites make it downright intuitive.

When users have difficulty achieving that purpose, they become frustrated. “All I wanted to do was find X. Why is that so hard?”

Dividing up your pages. Project Polymath site:

Standard non-profit activities:▪ Users can donate,▪ Get involved, or▪ Find out how to take advantage of the services we offer.

Unique activities related to our purpose:▪ Users want to find out who we are and what we’re trying to do,▪ How we plan to do it, and how long we think it’s going to take.

Actually not a very interactive site.▪ Lots of information, but informatively focused, kind of one way.▪ Users want to talk about information they come across.

▪ Especially after doing a lot of one-way interaction (like after seeing long movies).▪ So we have a place for users to talk about it.

How many links?

The size of your navbar will affect its placement. If you have a few links (or a few categories), a top

navbar will work well.▪ Although a side navbar will work pretty well too.

If you have many, a side navbar may be better. Horizontal space is more important than vertical

space. For some reason, users don’t like to horizontally scroll

as much. Lots of links on top -> horizontal clutter.

Comments in HTML We’re going to discuss ways of including common content across multiple

pages. To do this, we’ll need to discuss comments. Comments are lines of text that are included in the raw HTML but not

rendered by the browser. You can see them in “view source”. But they appear nowhere on the page.

They look like this: <!--You won’t see this in the browser, only in the source.

Any amount of text, including <b>tags</b>, can go here, even across multiple lines. And it won’t end until… -->

You can use comments to annotate your pages, to make the function of the code easier to understand. The users don’t see them (unless they use view source). But you or other developers can refer to them.

Server-Side Includes A server-side include (SSI) is a way of automatically copying the content of

another file into your page. For example, if you have a page header that you want to appear on every page on

your site:▪ You’d put the header code in a separate file (say header.shtml)▪ And include it in all of your pages as follows:▪ <!--#include virtual=“header.shtml”-->

As the name implies, SSI is parsed on the server.▪ The server sees that special “#include” string, retrieves “header.shtml”, and copies all of the

code from that file into your document in place of the #include comment.▪ If it can’t retrieve the file (say the name or path is wrong), it will instead replace it with the text

“[an error occurred while processing this directive]”. Therefore, it won’t be processed as a local file; it needs to be uploaded.

▪ In other words, you can’t preview SSI content until you upload it.▪ (Note that Dreamweaver is smart enough to process SSI in its design view, however).

Files that use SSI must have the extension .shtml (not just .html) If the file isn’t set up right, the comment won’t be replaced with anything.

The Problem With SSI Imagine this scenario:

You include “/header.shtml” in a page called “/about/index.shtml”. header.shtml contains an image at “images/test.jpg” The code from header.shtml is copied into your file where the include statement is. Including the reference to images/test.jpg. But this is relative to the current page, so you’re now referencing “/about/images/test.jpg”,

which is not valid. Solutions:

Use an absolute path name. Start your relative paths with “/” (making them relative to the root directory of the website). Use the <base> tag.

<base href=“http://www.mysite.com/mypath/” /> This tag goes in the <head> section. It tells the browser “all relative links are relative to http://www.mysite.com/mypath”. Which means you can include pages from anywhere and the links will stay the same. There’s also a target attribute, which determines where all links open by default.

SSI Header

SSI Footer

Frames Frames allow you to show multiple pages side-by-side to your

visitors. The individual pages can be scrolled and resized. These were once very popular, but later fell out of favor:

They were commonly misused. Search engines had problems indexing them. They were difficult to print.

They are still a valid means of including content on the client side, however. In contrast to SSI, which is a server-side technique.

One advantage of this is that while SSI pages must be fragments of HTML pages, each page in a frame is a full page.

Frame Code

Pages with frames are a bit different than normal pages. The actual page that is loaded doesn’t have content of its

own, only frames. As such, it has no <body> tag. Instead, it has a tag called <frameset>.▪ This defines how the frames are split up. It has attributes “rows” and

“cols”, which define the dimensions of the frames (in %, separated by commas).

▪ Inside of this tag are <frame /> tags pointing to each page to load inside of each frame…

▪ And a <noframes> tag, with content to show if the browser doesn’t support frames.▪ (Almost every browser in existence supports frames by now, though)

A Framed Page.

Inline Frames

It’s also possible to place frames inside of a page with other content. Advertising sites do this quite often. The ads run in an inline frame on your page.

Such a frame is called an IFRAME, or inline frame, and is created with the <iframe> tag. The “src” attribute points to the page to include inside of the

frame. The usage is similar to an <img> tag.▪ Instead of an “alt” attribute, content can be placed inside of the tag

that will show if iframes aren’t supported.▪ (iframes are also supported by almost every modern browser)

IFRAME Demonstration

Targets On a page with frames (including iframes), we can choose where links open.

By default, they open in the same frame they originated in. But it may be desirable to open them in a different frame, or to eliminate the frames and open

them in the whole page. For this operation, we have the “target” attribute.

e.g., <a href=“mypage.html” target=“_blank”>Link</a> opens mypage.html in a new window. Target can be given the name of a frame or iframe to open the corresponding link in that frame… Or it can have one of four special values:

▪ _self: Links open in the current frame. This is the default.▪ _parent: Links open in the parent frameset, replacing any frames within it.▪ _top: Link opens in the whole page, wiping all of the frames out.▪ _blank: Link opens in a new browser window or tab (without frames). A “popup link”.

The default can be changed with the “target” attribute of the <base> tag, which has the same choice of values.

Note that target is not a valid XHTML 1.0 Strict attribute. It is, however, in XHTML 1.0 Transitional. You can still use it and it won’t impact how your

page looks; it just won’t validate on the W3C’s XHTML 1.0 Checker.

Lists

There are two types of lists:1. Unordered Lists.2. Ordered Lists.

Unordered lists have bullets. No ordering between these bullets, circles, or other

symbols is defined. Ordered lists have numbers or letters.

The first list item is marked “1” or “A” The second “2” or “B” And so on.

Lists in HTML Unordered lists are created using the <ul> tag. Ordered lists use <ol>. Inside of either of these tags, each list heading starts with <li>.

<li> is a block-level element; other content can go inside of it. Lists can also be nested by inserting additional <ul> or <ol> tags inside of an <li>

tag. For example: <ol>

1. <li>List item 1</li>2. <li>List item 2</li>3. <li>List item 3 <ol>

1. <li>Sublist 1.</li>2. <li>Sublist 2.</li>

</ol></li>4. <li>List item 4.</li>

Styling Lists The appearance of a list is highly customizable using CSS. Relevant rules include:

list-style-type: “circle”, “decimal”, “disc”, “upper-alpha”, and more (controls the bullet appearance).

list-style-position: “inside” or “outside”.▪ If “inside”, the bullet is indented with the list item.▪ If “outside”, it is not.

padding-left: Controls the indent of the list. Set to 0 to remove the indent entirely.

display: List items have display: list-item by default. Set to inline to make horizontal lists.▪ You can also do this by floating the list items left.

You can style every item in a list using the selector “.ListClass li” (or “#ListID li”, “ul li”, etc.)

Navbars From Lists

Navbars are usually lists of links. So it makes sense to create them using lists. However, we don’t want them to show up with bullets or

numbers (usually). CSS to the rescue!

We can eliminate the bullets (list-style: none). We can make the list horizontal (display: inline or float: left). We can add space between our links (margin-right or

margin-bottom). We can even create borders around individual list items.

Making a Navbar

Tables Sometimes you want to display tabular data on a website; i.e. data

with rows and columns. HTML has support for tables:

The table begins with a <table> tag. Each table row must be defined using <tr> and must have the same

number of cells. Within each row, a normal table cell is declared with <td>. Header cells are

declared with <th>. Sometimes cells should span multiple rows or columns:

The <td> and <th> tags support the attributes “rowspan” and “colspan”. For example, setting colspan=“2” would cause a cell to occupy two adjacent columns in the table.

Each row must have the same number of cells, but this one now counts twice towards that number (it occupies two columns).

Example: <table style=“border: none”>

<tr>▪ <th>Name</th>▪ <th>Base Salary</th>▪ <th>Bonus</th>▪ <th>Total Salary</th>

</tr> <tr>

▪ <td>Alice</td>▪ <td>$50,000</td>▪ <td>$2,000</td>▪ <td>$52,000</td>

</tr> <tr>

▪ <td>Bob</td>▪ <td colspan=“3”>$40,000</td>

</tr> <tr>

▪ <th style=“text-align: left”>Total:</th>▪ <td>$90,000</td>▪ <td>$2,000</td>▪ <td>$92,000</td>

</tr> </table>

Name Base Salary

Bonus Total Salary

Alice $50,000 $2,000 $52,000Bob $40,000Total $90,000 $2,000 $92,000

Next Time

Forms and interactivity.Simple rollovers and other such

effects.

http://www.projectpolymath.org

A Nonprofit Organization of New Jersey, USA