Notes on How to set up and maintain Web pages

Where to put your Web pages

On your Linux/UNIX account on something like:

student.computing.dcu.ie

in a directory called public_html:

cd
mkdir public_html
edit public_html/index.html
edit public_html/file.html

to make the files:

http://host/~user/
http://host/~user/file.html

The URL will be something like:

http://student.computing.dcu.ie/~username/

Web hosting in DCU:

ISS
- Web Publishing
redbrick (the DCU student Net Soc)

Protections

The hierarchy of directories above the files needs to be executable by "others". See Notes on directory protections

cd
chmod o+x .
chmod o+x public_html

All files need to be readable by "others". See Notes on file protections

cd
chmod o+r public_html/index.html
chmod o+r public_html/file.html
chmod o+r public_html/image.jpg

How to write them

Raw HTML in a text editor
- HTML Reference
Raw HTML in an assisted text editor
- HTML editors
- NoteTab
  - Clipbook libraries - see also Latex, C++, etc.
WYSIWYG Web editors
- Browser editors
- Word Save As
- May generate very complex, spaghetti, machine-generated HTML code that breaks oddly in different browsers, or mobile browsers.
  - Word 2 html
  - Script to fix the junk HTML generated by Microsoft WYSIWYG tools
- It might be OK for writing 1 or 2 pages, but can it scale up to hundreds of pages organised in directories and subdirectories and massively interlinked? My experience with these editors, and the complexity of simply trying to implement relative links instead of absolute links, suggests often no. As you scale up, you need to be able to understand HTML, so that you can make adjustments by hand and in scripts and programs, as well as whatever assisted tools you use.
- Note WYSIWYG editors are misleading on the Web because the Web is not WYSIWYG. Your users are looking at your pages on mobiles, PDAs, netbooks, old systems, tiny screens, wide screens, with custom colours, fonts not installed, ad blockers on and windows resized. WYSIWYG editors delude you into thinking that what you are looking at is how the page will look to the user.
Web content management system

Minimalist web page

<html>
<head>
<title> My web page </title>
</head>
<body>

<h1> My web page </h1>

<p> I am a very interesting person
and here are my poems. </p>

<p> Here is a link to my favourite artist,
<a href="http://www.daniel-site.com/"> Daniel O'Donnell</a>.
I hope to marry him some day. </p>

</body>
</html>

Browsers are forgiving:
- Case of tags doesn't matter. Blank space and new lines are all compressed.
- You can probably leave out the <html> tags, and also the closing </body> and </html> - all browsers can display partial downloads.
- Also <p> starts a new paragraph no matter what, so you can leave out the </p> tags.
However see XHTML

Read HTML Reference.

"View .. Source" on other people's pages round the Web to scavenge them for ideas (be careful not to scavenge actual content (text or image) though!)

Some HTML tags.

Using other formats

(or converting other formats to HTML)

Plain text
- Just link to it, and browser should display it automatically.
- If problems, maybe change extension to .txt, or just scrap extension.
Latex
- latex2html - Math as inline images
PostScript
- Often UNIX-only
Word docs, PDF, rtf
- Often Win-only
How to read other formats

HTML plus images

HTML plus images is the most portable format, readable everywhere and on anything. Think of your users not just in the CA labs, but also at home, at work, abroad, on old machines and slow phone lines, on Web TV and palmtops. Why make them unable to read your work for no good reason. Use the lowest common denominator.

pdf, doc, ps, rtf, and anything that requires plug-ins in general, often break the clean Web model of browse-and-move on. Instead we get a dialog asking us to save to disk (Where? And will litter be left behind?) and run the plugin to view.

Of course, this is all about integration of the plugin with the browser - you can set it up so that the plugin launches automatically and the file is deleted afterward. But of course you have to go and get the plugin. And wait 2 hours while it downloads. And install it. And reboot. And you've got other things to do. And are you really bothered about reading this document anyway? There's lots of other stuff to read on the Net. So you hit the "Back" button, and move on.

With the browsers many people currently use, pdf, doc, ps, rtf simply means "not browsable", "off line".

HTML creates a seamless Web

Also, if it is in HTML, the content can be picked up in search engines (whereas content of ps, doc, pdf, etc. may be hidden).

Google now searches pdf and other formats, including PostScript [ps], Word [doc], PowerPoint [ppt], Excel [xls] and Rich Text Format [rtf].
See discussions here and here.
See also the new specialised Citation search engines, which search and index ps and pdf.

But perhaps the most important reason to present everything in HTML is that people can link to it, can link to sub-sections within it, can link to labels within those sub-sections, and those sections in turn can link back out to everything else on the Web.

See hyperTex - embedding links within PS documents to other PS documents and ordinary html sites. Apparently PDF can also embed hyperlinks now.
Can anyone find an example online of a link to a section within a PS or a PDF document?

HTML is safe

Another reason not to use Microsoft Word documents is the risk of spreading viruses. This risk does not exist with the other formats (certainly not with HTML).

Even if you are confident your Word files are uninfected, think of your users. As I'm browsing data, unless something is absolutely essential to my job, if I see that somebody's data is in Word format, I simply won't read it.

Robert X. Cringely points out the genius of Microsoft's public relations:

The wonder of all these Internet security problems is that they are continually labeled as "e-mail viruses" or "Internet worms," rather than the more correct designation of "Windows viruses" or "Microsoft Outlook viruses."

How to browse them

Don't need them online to browse them:
- http://computing.dcu.ie/~USER/
Can browse offline work direct from disk:
- file:///users/USER/public_html/index.html
(this is also useful when server is down)
Under Windows, use various tools to make UNIX look like a drive, and browse:
- file:///X:/public_html/index.html
Or even edit them completely elsewhere, e.g. on laptop, and upload later:
- file:///C:/My Documents/My Web pages/index.html

Relative links

For this to work we need relative links:
- <a href="subdir/file.html">
- <img src="../picture.gif">
rather than absolute links:
- <a href="/~USER/subdir/file.html">
- <a href="http://computing.dcu.ie/~USER/subdir/file.html">
- <img src="/picture.gif">
- <img src="http://computing.dcu.ie/picture.gif">
so that the link will work whether we are browsing in "http mode" or "file mode"

How to upload them

Edit them directly off disk in UNIX, or:
Edit them in Windows. Make UNIX account look like a drive:
- In CA lab, use SAMBA. Then drag and drop (or edit direct off disk).
- From home/remote, use WebDrive (uses read-write ftp to make remote UNIX computer look like just another drive). Then drag and drop (or edit direct off disk).

See Accessing UNIX remotely and from Windows.

Search engines

See How to write a CGI script.

My search engine simply does a grep of all my web pages on the spot, and pipes the result through a filter that generates tidy HTML code (so you can click on the pages in the results).

How to write a search engine in 9 lines of Shell

CSS

With hundreds or more pages, you will want a common look and feel.

Cascading Style Sheets - common look and feel.
CSS reference
e.g. On one of my sites I change the feel of navigation links at the top by defining my own anchor class main-navigation in the stylesheet, and then using it like:
```
<a class=main-navigation href="http://HumphrysFamilyTree.com/blog.html">Blog</a>
```

SSI

With hundreds or more pages, you will want to separate out code that is common to all pages.

SSI - drag common code (e.g. header and footer) into every page. Simply include a line like:
```

```
Can change header.html and it changes in all pages.

SSI is invisible to client:

In (say) included JavaScript:
```
<script src=http://file.js ></script>
```
the user (client-side) can see the include has happened.
With SSI, the client-side can't detect the include has happened. It just gets a load of HTML in the page. It might be hard-coded in each page. The client can't tell.

Missing DCU student