Lecture 6 - Webpage Organization and Complex Tables

8/14/2019 Lecture 6 - Webpage Organization and Complex Tables

1/16

Lecture 6 Web-page Division and

Organization


2/16

Outline

In this Lecture, we continue our discussion of XHTML

Naming elements

Defining Classes: groups of elements

Fragments: Linking within a page.

Web-page Sub-division

Breaking a Page up into Divisions

Smaller Chunks: Creating inline Spans

Tables (cont.)

Dividing Tables into Column Groups


3/16

Naming Elements

It is often desirable to name elements for later reference

So we may apply a style rule (orjavascript) to an element, etc. This may be done in two ways:

By assigning an individual name to the element (an id);

By assigning the element to a class.

Most elements may be given name, using the id attribute:

Within the start tag of the element (e.g.,

), type:

id=e_name

This assigns the element a unique name (here, e_name ).

Note: no two elements in a page can have the same id.

This also automatically turns the named element into an anchor. We can then use it as a destination for a hyperlink

Using the anchor element, a.


4/16

Defining Classes

Elements may be assigned to a class with the class attribute: Type the class attribute within the opening tag of the element:

class=c_name

This identifies the element as a member of class c_name

Again, you choose the name.

If a style-rule is applied to that class, it affects every member. This allows us to apply a style-rule to all class members at the same time!

For instance, changing text color to red, for elements in class Beethoven.

So, document-wide changes can be made very quickly (one step).

More on this, when we discuss CSS (Lectures 8+)

Note: an element may belong to more than one class.


5/16

Linking Within a Page

In addition to other web-pages, you may want internal links. Example: a link to the bottom (end) of a long page.

Orperhaps, links at the top, to important sections later on... So the viewer can go directly there.

To create an internal link (= fragment): Method 1: Create an anchorat the desired destination, by typing:

label

anchor_name is the text used to identify the anchor, internally. Your choice, as usual.

Label is the words or image you wish to be referenced. i.e., where visitors will actually go, when they reference a link to the anchor.

Then, you may create a link to that fragment, by typing:

label

This is just the usual form for a link Except that the destination is # + the name of the pre-defined anchor.

Method 2: Any named element automatically acts as an anchor To link to an element with an id, just use href=#id.

Note: Fragments (method 1) are deprecated in XHTML 1.0 When using XHTML 1.1, you should link to a named element.


6/16


7/16

Page Spans

You may also organize at a smaller, inline level:

i.e., define spans of text or other inline elements. So that all text within the span can be changed, together

You may define inline spans with the span element.

To define a span, surround the span contents, as shown:

span contents

This is quite similar to the div element

Again, attributes id and class are optional:

Use id if you want to name the span;

Use class if you want the span to be a member of a class. However, span contents is the surrounded text and elements:

In a single line.

Note: This is sub-division at the INLINE LEVEL.

span allows you to apply a change to the whole span

Using just one style-rule (we discuss this next lecture).

Thus, span is your second Generic Page Element.


8/16

Example: Page Divisions and Spans


9/16

More on Tables: Column Groups

We have already seen a method to group rows Since we may divide a table into head, body, and foot sections.

We may also divide a table into column groups (two ways).

To divide a table into structural column groups, use colgroup: This allows control over drawing rules (i.e., lines).

After the table (and caption) tags, place the colgroup element:

c

The span attributesets n, the number of columns in the colgroup.

attributes indicates the desired characteristics of the group For example: align=center, and/or class=fuzzy.

But: for formatting, we will instead use the col element (next).

Here, c indicates the definition of non-structural column groups.... Inside the structural column group.

Repeat this grouping method to define multiple colgroups Note: groups are non-overlapping, Also: groups are defined from left to right.


10/16

Column Groups (cont.)

The colelement defines non-structural groups

Useful when you want to define a group without affecting ruling.

After the table (and caption) tags, place the col element:

Also, the span attributesets n, the number of columns in the group.

Again, the desired characteristics of the group are set at attributes For example: align=center, and/or class=fuzzy.

Repeat to define more than one group Note that groups are non-overlapping,

Also, groups are defined from left to right.

Note on usage:

A. Use colgroup to decide where the lines will go.

B. Use col for everything else.

Note: Both types of column grouping are completely ignored by

Netscape.


11/16

Choosing Which Borders to Display

Tables were originally designed to display data

In the classic table format. It is often useful to format such classic tables with rules (= lines).

As we saw earlier, the borderattribute causes a border to appear: Between each pair of cells; Around the table, itself.

XHTML lets us choose which parts of the border to display Both external and internal to the table.

To choose which external sides have a border: Use the frame attribute of the table element.

In the table start tag, type:

frame=location

frame takes the values (location): void = no external borders above or below = a single border on top or on the bottom vsides = a single border on both top and bottom rhs or lhs = right-hand or left-hand side

hsides = a single border on both right and left box (or border) = a single border on all sides (default)


12/16

Choosing Internal Borders

To choose which internal borders to display:

Use the rules attribute of the table element. In the table start tag, type:

rules=location

rules takes the values (location):

none = no internal borders; rows = horizontal rules between all table rows;

cols = vertical rules between all table columns

groups = rules between column groups and horizontal sections

(i.e.: between the head, body, and foot);

all = rules between each row and column (default);


13/16


14/16

Project: Start on your Web-Site Our midterm will be an IN-CLASS test:

The test will be on Next Friday (After Lecture 7)...

However, we also have a Final Project : your own Web-Site With html files and images organized in a properweb directory. Not due until the Final Exam period (but you should get started)

Your site should consist of at least of 4 linked pages: Your Sites Home Page (i.e., index.html), which provides:

An introduction to your site; Links to web pages

both inside (relative URLs) and outside (absolute URLs) your site.

You should also demonstrate basic XHTML techniques: Headers, Paragraphs, images, basic formatting, use of special characters, etc.

A List-based Professional Resume (be careful about personal information): This page should demonstrate your knowledge of XHTML lists:

Both ordered, unordered, and nested lists should be included.

Also, provide internal links from the page top to each sub-section. Examples: Links to Education, Work, Hobbies, and Interests

3. A Table-based Picture Gallery (separate folder): This page should demonstrate your skill with XHTML tables This page should also contain one nested table, and one image map.

Note 1: I will add more requirements later. Note 2: Place pictures away from html files (in picture folder(s)).


15/16

Project Submission (around exam week)

Note 1: Use of any Web Editor on this assignment is CHEATING!

Examples: Dreamweaver, FrontPage Express, etc Will result in an automatic 0% for each generated page.

Note 2: You should validate your pages as proper XHTML Using the W3Cs validation service.

Submission will be Online:

To this courses Submission Folder (APU Net Guide, p. 85). I will announce the directory name after the break....

Also Include a 1-page web-site summary in your root directory. Describing briefly your site, and the XHTML features in each page. Format: a single word file (English Language).

Important: Submit your entire directory in a folder: Name the folder with yourname and student ID number, separatedby an underscore(_)

Example: StudentName_12345678_Midter

Due on the same day as the Final Exam, at midnight(Tentative).


16/16

Conclusion

In this Lecture, we have discussed: Naming elements

Defining Classes: groups of elements Linking within a page. Web-page Sub-division

Breaking a Page up into Divisions

Smaller Chunks: Creating inline Spans Tables (cont.)

Dividing Tables into Column Groups

Next Lecture, we will continue with:

Image Maps: which allow multiple links in a single picture, And some other bits and pieces of XHTML

Frames: Which allow us to divide the browser window into mini-windows

Each displaying a different XHTML document.

Lecture 6 - Webpage Organization and Complex Tables

Documents

Transcript of Lecture 6 - Webpage Organization and Complex Tables