Lecture 4 - Introduction to XHTML (2)

8/14/2019 Lecture 4 - Introduction to XHTML (2)

1/24

Lecture 4 Introduction to XHTML(2)

In this lecture, we will discuss two related topics: A. Your Website (Some Design Fundamentals)

Considerations to think about before coding.

Also: How to upload your files to the APU server.

B. XHTML (Part II) Then, we will continue our discussion of XHTML:

Including images Special Characters Simple Formatting Lists:

Unordered, Ordered, and Nested


2/24

Part I Design Fundamentals


3/24

Design: Your Website

Now that weve discussed the basics of links,

lets take a break from XHTML

And talk a little bit about basic Website Design.

First of all, we distinguish between two terms:

Web-site: A set of linked XHTML files and resources

In this case, posted to APUs server by you. All your sites files will be stored in yourweb directory:

A set of related folders, holding all of your sites resources.

More on this, shortly

Homepage: The default page of your web-site.

This is where visitors go when they visit your site.

Provides a convenient central starting location.

The XHTML file for your sites homepage:

Saved in the top folder of yourweb directory (see next slides).

First note on Web-site structure: Web-sites are usually not linear!


4/24

Websites and Website Organization

Step 1: Deciding on the Sites Overall Plan Your web-site should begin as a simple picture:

Made with pencil and paper

It will show an overall plan of the site: A map of the planned pages and links

This will help guide your design.

Example:


5/24

Websites: File Structure

Step 2: Organizing your Files

Before creating a lot of XHTML files Its a good idea to figure out where to put them (organize first)!

First, you need a Root Directory (top folder).

The XHTML file for yourhomepage will go here

Next, divide this folder up into sub-folders: To reflect the planned organization of the site.

Create a sub-folderfor each

section of your site To hold related XHTML

files.

With sub-folders to holdimages

Here is an example: (*) Note: At the APU site, your

root directory will always be:

public_html(not website)


6/24


7/24

Posting Your Website at APU

To post your website for public viewing You must upload your files to the APU-Net WWW server. All students already have space on the server for this.

This is done via FTP, using the FTP Explorer program.

Follow the instructions in the APU-Net Guide:

Chapter 9: Student Web Pages (pp. 117-119).


8/24

Accessing Your Website After Uploading your files

your Website will be available on the internet.

The address of your homepage will be:

http://www.apu.ac.jp/~user_id/

You can access your website in two ways:

Via a Web Browser(e.g., directly, using Netscape); Just enter your URL in the Location Bar.

Through the Campus Terminal: Just click the APU Directory menu item (shown):

Followed by Student, etc.


9/24

Part II XHTML Basics (2)


10/24

Inserting Images on a Page

Of course, Web pages include Images, as well as text. So

Images are included using theimg

element:

Note that the imgelement tag does not surround any text context i.e., text to effect;

Such elements are called empty elements. Note that they are still terminated with a />.

Elements such as p, whose tags surround text are called: non-empty.

The src attribute stands for source: The value ofsrc specifies the image URL

Including both the path and image file name.

The heightand width attributes specify the image dimensions In pixels (picture elements)

These take integer values.

Thus, they allow scaling. If omitted, the browser uses the actual picture size.


11/24

Offering Alternative Tex

You are required to offeralternative text...

Text to be shown, if the image cannot load. By using the altattribute (last page).

The value is just the text string to be displayed, in quotes, as usual.

Example:

This also provides visitors with a Tool Tip:

When a user moves his pointer over the picture

the alternative text is displayed in a small box (tool tip) below the cursor.

This works in both Netscape 7.x and IE6.

Recall that some browsers do not support images (e.g., Lynx) In this case, the alternate text may be read out loud.

This is very helpful forvisually-impaired visitors.


12/24

Types of Image Files

The most popular image formats used by Web Developers are:

Joint Photographic Experts Group (JPEG) images;

You are quite likely to use *.jpg files

Portable Network Graphics (PNG) images;

Graphics Interchange Format (GIF) images.

A discussion of image formats is beyond our current interest

If you plan to put large or complex pictures on your pages

I highly recommend compressing your images to a smaller size.

Smaller image files quick loading into the browser

less abandonment of your page by viewers.

The software I use is called Advanced JPEG Compressor

Renders about a 13:1 compression. This makes the file much smaller


13/24

Example: Including Images The red-boxed code inserts the picture

Image available in my Instructional Materials See: jarose > Internet Fundamentals > Lecture 4

The image size (entered below) is actual size as determined using the image properties window.

For DTD info, see : http://en.wikipedia.org/wiki/Document_Type_Declaration


14/24

Using Images as Hyperlinks Images may also be used as hyperlinks:


15/24

Special Characters

Many characters are difficult to place directly into an HTMLdocument. Some are non-ASCII (2-byte characters).

And are not on most keyboards. Accented characters, Math characters, Kanji, etc

For characters If we use Wordpad, our O.S. helps us to insert directly! However, we need to define the default encoding appropriately (shift_JIS).

Others are reserved characters: i.e., that have special meaning in HTML and XHTML

e.g.: (for tags)

For reserved characters, and chars outside of our defined set We will need to add the characters manually:

By typing codes.


16/24

Special Characters (cont.) XHTML provides a character reference for ALL characters:

Within the context of the Universal Character Set

UNICODE The general form is: &code;

There are three flavors of codes Named Entity reference :

& ( = &), > ( = >), < ( =

Lecture 4 - Introduction to XHTML (2)

Documents

Transcript of Lecture 4 - Introduction to XHTML (2)