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…
 It’s a good idea to figure out where to put them (organize first)!
 First, you need a Root Directory (top folder).
 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…
 A file called ‘index.html’
 He will instead be shown a list of all the folder’s files.
 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:
<img src=“image.jpg”
height=“val” width=“val”
alt=“Alternative Text”
/>
 Note that the img element 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 of src specifies the image URL…
 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...
 Text to be shown, if the image cannot load.
 By using the alt attribute (last page).
 The ‘value’ is just the text string to be displayed, in quotes, as usual.
 Example:
<img src=“myPic.jpg” alt=“a picture of Turtle River” />

 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 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’
 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
 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.
 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.
 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 :
 & ( = &amp;), > ( = &gt;), < ( = &lt;), “ ( = &quot;)
 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…
 <p>if x &lt; 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, <br />
 Most browsers render this tag as a line break.
 The <hr /> tag may be used to draw a horizontal rule (line).
 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, &frac12; yields ½
 The character entity reference, &frac14; 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:
 Tables and Lists
 First, we will talk about lists.
 Lists are used to group information (often hierarchically).
 Lists come in two “flavors”:
 Unordered
 List elements are bulleted, not numbered or lettered…
 May imply equal priority or simultaneity among elements.
 Example 1:
 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):
<ul>
<li> list element 1 </li>
<li> list element 2 </li>
</ul>
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 will then be displayed hierarchically.
 List elements are again added using the li element.
 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.
 As in the current power-point slide…
 This line is in a set of nested un-ordered lists, at level 4.
 In unordered nested lists,
 List levels are also distinguished by different bullets
 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
 Incl. using images as hyperlinks.
 Some Simple Formatting:
 Line-breaks, horizontal rules, superscripts and subscripts
 Special Characters
 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