Web pages (more)

Multiple files model

• HTML file embeds JPEG file. Two separate files.
• JPEG could be in different directory.
• This can make it awkward to email someone a page with multiple supporting files.
• One solution: MHTML format (bundles all files into one file).

Using other formats

• Plain text
  • Just link to it, and browser should display it automatically.
  • May or may not need extension like .txt

• pdf, docx, doc, ppt, xls, ps, rtf
  • Can all your users view this? On all platforms?
  • What happens when user clicks it? Jumps out of browser?

HTML plus images (browse-and-move-on)

HTML plus images is the most portable format, readable on anything. Your users are not just on PCs but on mobiles, tablets, netbooks, and on old machines and old software. Why make them unable to read your work unless there is a good reason.

pdf, docx, doc, ppt, xls, ps, rtf (and in general anything that requires plug-ins and separate applications) may break the clean Web model of browse-and-move-on.

HTML creates a seamless Web - Other file types can break this

1. Searching for and searching in:
   If it is in HTML, the content can be easily picked up in search engines (whereas content of other formats may be less accessible).
   Content on a page can also be easily searched in HTML.
   • File types indexable by Google
   • Google indexes PDF [pdf], PostScript [ps], Word [doc, docx], PowerPoint [ppt], Excel [xls] and Rich Text Format [rtf].

2. Linking in and out:
   If it is in HTML, people can link to it, can link to sub-sections within it, and those sections in turn can link back out to the Web.
   • You can link to sections in PDF. See example:
     • http://www.militaryarchives.ie/collections/online-collections/bureau-of-military-history-1913-1921/reels/bmh/BMH.WS0682.pdf
     • http://www.militaryarchives.ie/collections/online-collections/bureau-of-military-history-1913-1921/reels/bmh/BMH.WS0682.pdf#page=3
     It seems you can do this with any PDF:
     • https://www.csee.umbc.edu/courses/471/papers/turing.pdf
     • https://www.csee.umbc.edu/courses/471/papers/turing.pdf#page=11
     And PDF can link back out.

   • HyperTeX - LaTeX documents which can link out. And you can link in.

How to browse your Web pages

• Browse them online:
  • https://www.computing.dcu.ie/~USER/

• Maybe browse them direct from disk (will not work with some types of pages):
  • file:///users/USER/public_html/index.html

• Under Windows, use various tools to make UNIX look like a drive, and browse:
  • file:///X:/public_html/index.html

• Edit them in some "development" dir, and copy to public_html when done:
  • file:///users/USER/dev/index.html

• Edit on different machine and different OS, and copy to server when done:
  • file:///C:/path/My Documents/My Web pages/index.html

Dev site and production site

Good to have a dev site (development, save drafts, test) and a production site (live to the world).
When dev site changes are debugged, copy changes to production site.

Ways of linking: relative links and absolute links

• <a href="subdir/file.html">
• <img src="../picture.gif">

rather than absolute links:

• <a href="/~USER/subdir/file.html">
• <a href="https://www.computing.dcu.ie/~USER/subdir/file.html">
• <img src="/picture.gif">
• <img src="https://www.computing.dcu.ie/picture.gif">

so that the link will work whether we are browsing in "http mode" or "file mode"

Example of ways of linking

In page:

 https://student.computing.dcu.ie/~mhumphrysdculab/s/s/file.html 

To include this image:

 https://student.computing.dcu.ie/~mhumphrysdculab/img.jpg


Choices:

1. Absolute http address
 <img src="https://student.computing.dcu.ie/~mhumphrysdculab/img.jpg"> 

2. Absolute http address, dropping server
 <img src="/~mhumphrysdculab/img.jpg"> 

3. Absolute file address
 <img src="/users/tutors/mhumphrysdculab/public_html/img.jpg"> 

4. Relative address
 <img src="../../img.jpg"> 


Notes:

2. works for http:// mode only
3. works for file:// mode only

1. works for both http:// and file:// mode
 but only works for production site, not dev site (if different)

4. works for both http:// and file:// mode
 and works for both dev site and production site 

• In the above example, 4. assumes we know what level the linking page is in the hierarchy.
• We might not know. e.g. Header included on all pages in all levels. Header must use absolute addressing.

How to upload your Web pages

1. Edit them directly off public_html in UNIX.

2. Edit them in other dir in UNIX. When ready, copy them into public_html.

3. Edit them in Windows. Upload to UNIX.

4. Edit UNIX files directly from Windows:
   • How to turn an ftp site into a drive. Then can drag and drop, or edit direct off disk.

Exercise - Offline web pages

1. Make an offline web page file.html in your home directory (not in your public_html):

   cd
   gedit file.html &
   

2. View it in the browser through: file:///users/GROUP/USER/file.html
3. You cannot view it through: http://

4. Insert an <img src ... tag in it that embeds an image.
5. The image will be an image on the local disk, not on the web.
6. The image will be the image of Shakespeare found in my directory.
7. Figure out how to view my Shakespeare files through the browser. Find the location of the image of Shakespeare.
8. Embed using the path to my image, not a copy.