How to Create Your Own Website

Lecture 4: Pages to Sites. How to Create Your Own Website

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 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: •  • 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: • Unordered Lists. • 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> • <li>List item 1</li> • <li>List item 2</li> • <li>List item 3 <ol> • <li>Sublist 1.</li> • <li>Sublist 2.</li> </ol></li> • <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 “.ListClassli” (or “#ListIDli”, “ulli”, 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>

Next Time • Forms and interactivity. • Simple rollovers and other such effects.

A Nonprofit Organization of New Jersey, USA http://www.projectpolymath.org

How to Create Your Own Website