Lecture 4 - Introduction To Xhtml (2)

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 

Part I – Design Fundamentals

Design: Your Website 

Now that we’ve discussed the basics of links, 

let’s 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 APU’s server by you.  All your site’s files will be stored in your web directory:  A set of related folders, holding all of your site’s 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 site’s homepage:  Saved in the top folder of your web directory (see next slides). 



First note on Web-site structure: 

Web-sites are usually not linear!

Websites and Website Organization 

Step 1: Deciding on the Site’s 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:

Websites: File Structure 

Step 2: Organizing your Files 

Before creating a lot of XHTML files… 



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



It’s a good idea to figure out where to put them (organize first)! The XHTML file for your homepage will go here…

Next, divide this folder up into sub-folders: To reflect the planned organization of the site.  Create a sub-folder for each section of your site… 

To hold related XHTML files.  With sub-folders to hold images… 



Here is an example: 

(*) Note: At the APU site, your root directory will always be: 

‘public_html’…(not ‘website’)

Specifying your Homepage 

To specify an XHTML file as your Homepage…  

Save the file as: index.html Then, place it in the top folder of your web directory: 



In the website folder, in the example.

Security Tip: 

If a visitor enters a web directory folder that does not contain a default page… 



He will instead be shown a list of all the folder’s files. 



A file called ‘index.html’ This allows visitors to ‘map out’ a site (dangerous).

To avoid this, place an empty default page in each non-top folder of your site. 

Then, the empty page will show, instead of a list.

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

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.

Part II – XHTML Basics (2)

Inserting Images on a Page 

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

Images are included using the img element:



Note that the img element tag does not surround any text context … 



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 of src specifies the image URL… 



i.e., text to effect;

Including both the path and image file name.

The height and 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.

Offering Alternative Tex 

You are required to offer alternative text... 



By using the alt attribute (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… 





Text to be shown, if the image cannot load.

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 for visually-impaired visitors. 

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…

Example: Including Images 

The red-boxed code inserts the picture… 

Image available in my ‘Instructional Materials’ 



The image size (entered below) is actual size… 



See: jarose > Internet Fundamentals > Lecture 4 as determined using the image ‘properties’ window.

For DTD info, see : 

http://en.wikipedia.org/wiki/Document_Type_Declaration

Using Images as Hyperlinks 

Images may also be used as hyperlinks:

Special Characters 

Many characters are difficult to place directly into an HTML document. 

Some are non-ASCII (2-byte characters). 

And are not on most keyboards. 



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: 



Accented characters, Math characters, Kanji, etc

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.

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 : & ( = &), > ( = >), < ( = <), “ ( = ")  There are relatively few of these… 



Decimal reference (code = &#n;) # is the Hash symbol;  n is the base 10 UNICODE number for your character  Note: Don’t forget the semi-colon! 



Hexidecimal (hex) reference (code = &#xH;) x indicates a hex reference;  H is a character’s UNICODE code in hexidecimal. 



A code list is at the author’s web-site: 



www.cookwood.com/entities/

Example: the line: “if x < 10 then increment x by 1” is written… 

if x < 10 then increment x by 1< /p>

Simple Formatting (1) 

To cause a Line Break, use the br element: 

This is written as the empty element,




The

---

tag may be used to draw a horizontal rule (line). 



Most browsers render this tag as a line break.

A line-break is also added before and after the rule.

For convenience, we now introduce 3 new elements: 

The del element is rendered as strike-through text…



The sup element may be used for a superscript.



The sub element may be used to format a subscript.



For common fractions: The character entity reference, ½ yields ½  The character entity reference, ¼ yields ¼. 



We will see more simple formatting along the way (next lecture)… 

For now, let’s see all of these at work via an Example…

Example: Simple Formatting (1)

Lists 

Now, let’s talk more about organizing information within a page… 

Basic structures for organization include: 



First, we will talk about lists. 



Tables and Lists Lists are used to group information (often hierarchically).

Lists come in two “flavors”: 

Unordered 

List elements are bulleted, not numbered or lettered… 



Example 1:  



May imply equal priority or simultaneity among elements. Element Element

Ordered 

List elements are either numbered or lettered… 



May imply decreasing priority, or a time-ordering among elements.

Example: 1. First Element 2. Second Element

Unordered Lists 

An unordered list is created by the ul element: 

In this type of list, each item begins with the bullet symbol; 



e.g., a ‘disc’ (), etc.

List elements are then added using the li element. List elements may be text, links,  Most browsers render list elements: 

 



With a line break, And a bullet symbol indented from the beginning of a new line.

Example 1 (unordered list with 2 elements):

• list element 1
• list element 2

Unordered Lists (Example)

Ordered and Nested Lists 

An ordered list is created by the ol element: 

In this type of list, each item begins with a number; 



List elements are again added using the li element. 



List elements will then be displayed hierarchically. List elements are displayed indented, after a line-break…

Lists may be nested: i.e., lists may be placed inside of other lists…  List ‘levels’ are distinguished by indenting… 



The elements of successively-nested lists will receive an additional indents.  



In unordered nested lists, 

List levels are also distinguished by different bullets 



As in the current power-point slide… This line is in a set of nested un-ordered lists, at level 4.

For instance, levels 2 and 4 of this list have ‘ ’ and ‘’ bullets, respectively

In ordered nested lists, List levels are also distinguished by different numbering schemes.  Example: 1, 2, 3, … vs. A, B, C… etc. 



Note: We will learn to control numbering/bullets with CSS (later on).

Ordered/Nested Lists (Example)

Conclusion 

In this Lecture, we have discussed: A. Web Sites and Design Fundamentals  Some considerations to think about before coding.  B. XHTML Basics (Part II) 



Inserting images 



Some Simple Formatting: 





Line-breaks, horizontal rules, superscripts and subscripts

Special Characters 



Incl. using images as hyperlinks.

Non-ASCII and reserved characters

Ordered, Unordered, and Nested Lists

In the next Lecture, we will continue discussing XHTML: 

More Simple Formatting, The Old Way (useful HTML4) 



Bold, Italic, Text size, Monospaced Fonts; etc

Tables