Dr. Mark Humphrys

School of Computing. Dublin City University.

Home      Blog      Teaching      Research      Contact

Search:

CA216      CA249      CA318

CA400      CA651      CA668

Notes on How to set up and maintain Web pages


Where to put your Web pages

On your Linux account put them in a directory called public_html:

cd
mkdir public_html
cd public_html
gedit index.html &
gedit file.html &
to make the files:
http://student.computing.dcu.ie/~user/
http://student.computing.dcu.ie/~user/file.html

See:

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




Other web hosting in DCU



File and Directory permissions / protections

  1. 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
    
    On DCU this is done by default when you make directories.

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

    On DCU this is done by default when you make files.





How to write your Web pages

  1. Raw HTML in a text editor

  2. Raw HTML in an assisted text editor

  3. WYSIWYG Web editors

  4. Web content management system
    • e.g. CA site
    • Great for organisation where many users enter data. Users don't write HTML at all.

  5. Web templates - use the skill of graphic/CSS designers who make sites look good / portable.

  6. CSS frameworks - aimed at developers who will still access the code.

  7. Web application frameworks


Summary: Incredible number of tools and frameworks. Some aimed at ordinary user who wants to avoid ever seeing code. Others aimed at developers who want support but still want to retain full control.

Things to consider:

  1. If tool generates very complex HTML then it makes it hard to make any small changes by hand. Have to use the tool.
  2. Scaling up. Some tools are ok for editing a 5 page site but not for editing a 5,000 page site.
  3. Consider how difficult it would be to "replace X with Y" in 5,000 pages. Or move Images to a different directory and fix the links to them in 5,000 pages. Do you have to edit 5,000 pages directly or can you script the changes?
  4. Note WYSIWYG editors may be misleading on the Web because the Web is not WYSIWYG. Your users are looking at your pages on mobiles, tablets, netbooks, old systems, tiny screens, wide screens, with custom colours, fonts not installed, ad blockers on and windows resized. WYSIWYG editors may delude you into thinking that what you are looking at is how the page will look to the user.




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>






Some HTML tags.



Using other formats




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 netbooks, tablets, smartphones, and on old machines and old software and slow phone lines. Why make them unable to read your work unless there is a good reason.

pdf, 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 picked up in search engines (whereas content of ps, doc, pdf, etc. may be less accessible).
    Content on a page can be easily searched in HTML.

    
    
  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.




How to browse your Web pages


Relative links

To be able to browse the site in different ways like above, we need to use relative links:

rather than absolute links:

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

  

Example


In page:

 http://student.computing.dcu.ie/~mhtest15/s/s/file.html 

To include this image:

 http://student.computing.dcu.ie/~mhtest15/img.jpg


Choices:

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

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

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

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


Notes:
1. and 2. work for http:// mode only
3. works for file:// mode only
4. works for both http:// and file:// mode

Though 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

Say your website is on UNIX server:

  1. Edit them directly off public_html in UNIX.

  2. Edit them in other dir in UNIX. Periodically copy them into public_html.

  3. Edit them in Windows. Upload to UNIX. Maybe make UNIX account look like a drive:




Feeds      w2mind.org

On Internet since 1987.