Most Web servers run on Unix or Linux operating systems. This laboratory is intended to give you basic skills in managing files on Unix, transferring files between a local computer and a remote Unix server, transferring files such as HTML documents to a Unix server, and validating and rendering HTML documents on the server.
These may seem easy for some students, but will contain new concepts and hidden difficulties for others. You need to become expert in performing these sorts of tasks immediately. Your demonstrator will describe how to carry out each of these tasks and will explain anything you don't understand.
Study the PowerPoint presentation lab1.pptx which provides much useful background on how to access a Linux server from your local computer and how to navigate directories and set permissions on the server.
Remote terminal access (SSH). Establish an SSH connection to the Linux server dwarf.ict.griffith.edu.au (dwarf) using putty (from Windows) or Terminal (from Mac OS X). Login with your Griffith id and password. (Using Terminal from Mac OS X, you need to give a command of the form "ssh sid@dwarf.ict.griffith.edu.au".)
If you don't have a dwarf account, work with someone else today, but make sure you get your dwarf account sorted out urgently.
File transfer (SFTP). Establish an SFTP connection to the Linux server dwarf using WinSCP or FileZilla (from Windows) or Cyberduck (from Mac OS X). Again, login with your Griffith id and password.
You can access and work on dwarf using either SSH or SFTP. Using SSH is better in the long run as it allows many more tasks to be performed, but many students prefer to use SFTP as it requires less learning initially.
Check that you have a directory called public_html in your home directory on dwarf and that it has permissions 'drwx---r-x' (705). Otherwise, create a directory called public_html in your home directory with these permissions.
Directory structure. On dwarf, create a directory called wp inside public_html and give it permissions 'drwx---r-x' (705). Inside directory wp, create directories labs, assign1 and assign2, all with permissions 'drwx---r-x' (705). Inside directory labs, create a directory lab1, with permissions 'drwx---r-x' (705).
Your directory structure on dwarf should now look like this:
home directory
public_html
wp
assign1
assign2
labs
lab1
Having a clear, logical directory structure in which all directories and files have correct permissions is essential for success in Web programming in general and for this course in particular.
It is normally helpful if you use identical directory structures on your local computer and the remote server.
Text editing. On your local computer, use a text editor (e.g., notepad++ on Windows, TextWrangler on Mac OS X) to create a simple, HTML5 document called index.html in wp/labs/lab1 whose body contains a header, a section and a footer. The header must contain a "home" link to the page itself; the section must contain a heading, a list, a table, and an image; and the footer must contain an address block with your name and id. Do not include any presentation tags or attributes in your document.
You can set file permissions using either Linux commands (chmod 604 index.html) or from within your SFTP client, typically by first right-clicking on the file.
View your file in a browser by entering the URL http://dwarf.ict.griffith.edu.au/~sxxxxxxx/wp/labs/lab1/index.html, where sxxxxxxx is your Griffith id. Note that you do not include public_html in this URL.
Linking. On your local computer, create a second HTML5 document called other.html (that also has a header, a section and a footer) with a link to index.html, transfer it to the same directory on dwarf as index.html, and give it the correct permissions. Modify index.html by adding a link to other.html. Test in a browser that you can render the two documents from dwarf and that the link in each document correctly leads to the other document.
Validation. Validate your HTML5 documents index.html and other.html, using the W3C validator at http://validator.w3.org. You can either cut and paste your document into the textarea provided or upload the document from your PC. (You can not refer the validator to the document on dwarf.) If your document is not valid, modify it until it is.
Style sheets. Create a simple but nontrivial style sheet style.css (that is not a copy of the style sheet provided), validate it using the validator at http://jigsaw.w3.org/css-validator/, link your HTML documents to it as an external style sheet, transfer the style sheet and the updated HTML documents to dwarf, and test that the style sheet changes the presentation of the two documents as intended.
Milestones are the required tasks to be completed in lab classes. It is desirable to complete each milestone by the end of the lab class or the start of the next class, so you have enough knowledge and skill to attempt the next lab's tasks and are able to successfully complete the assignments. Milestones are targetted at the course's assignments. Credit of 2 marks is awarded for successfully completing each nominated milestone on time.
Demonstrate two HTML5 documents and a style sheet on dwarf as
described above, in
directory $HOME/public_html/wp/labs/lab1, that render correctly
in a browser and that are all passed by the HTML5 and CSS validators.