Lecture 4 pages to sites
1 / 25

How to Create Your Own Website - PowerPoint PPT Presentation

  • Uploaded on

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 .

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about ' How to Create Your Own Website' - mostyn

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Lecture 4 pages to sites

Lecture 4: Pages to Sites.

How to Create Your Own Website

Today s lecture
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
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
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
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
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
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
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.


  • 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
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)

Inline frames
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)


  • 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.


  • 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
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>


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

Styling lists
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 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
Making a Navbar


  • 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).


  • <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
Next Time

  • Forms and interactivity.

  • Simple rollovers and other such effects.

A nonprofit organization of new jersey usa

A Nonprofit Organization of New Jersey, USA