Lab Environment and HTML

Basic topics, Scientific Linux, Hercules, Eclipse, HTML

An Introduction to the Basic Topics of the Lab

The CS215 lab will cover the following basic topics on Web programming:

  1. HTML Fundamentals
  2. CSS Fundamentals
  3. JavaScript (a client-side script language)
  4. PHP (a server-side script language)
  5. MySQL Database
  6. PHP with MySQL
  7. AJAX

Topics 1 to 3 focus on client-side web programming. In other words, HTML, cascading style sheets (CSS) and JavaScript statements are processed by an web browser (the client) running on your machine. When you type in a URL, your browser (the client) makes a request to the web server at that URL to send all necessary files/scripts. The server generates a response by passing back any files/scripts requested. Then, any client-side scripts that are received by the browser are executed on your machine. The output from the client-side scripts and the HTML/CSS code are interpreted by the browser and finally displayed as the web page that you see.

Topics 4 to 6 focus on server-side Web programming. Specifically, PHP code and SQL statements are executed by servers (web servers and database servers). When you type in a URL to a website that has server-side code, your browser sends a request to the server. The server runs the server-side script to produce output/web page content that is then passed back to your machine in the response. Your browser then interprets the response and displays the web page. Notice that the server-side scripts are run on the server and the client-side scripts are run on your machine.

Topic 7 (Ajax) is a combination of client-side and server-side web programming.

Scientific Linux: The Operating System of the Lab

The operating system in the CS215 lab is Scientific Linux. In the lab, you will use Linux commands and the Linux GUI to set up your website and store files on Hercules. After the lab, you can connect to Hercules from home to continue your exercises, assignments and projects.

Logging on to the Linux Machines

You will use your computer science (CS) username and password to log on to the Linux machines in the CL115 lab.

IMPORTANT: Logging out before Leaving

When you are done working and ready to leave, the last thing you should ALWAYS do is log out. Otherwise, you run the risk that another student will access/modify your files. To logout, choose: System > Log Out your_username from the main menu. Do not turn the power off.

Basic Linux Commands

A summary of Linux commands:
http://www.cs.uregina.ca/Links/class-info/115/01-unix/unix_command.html

Linux commands cheat sheet:
http://www.computerhope.com/unix.htm

Eclipse IDE: Your Editing Environment

Ideally, you can use any text editing software to write HTML, CSS, JavaScript, PHP and Ajax code; but it is more convenient to use the powerful features of Eclipse. Eclipse is an open source, Integrated Development Environment (IDE), which provides features such as: highlighting key words, code completion, and syntax checking. Aside from using it only in the lab, many IT companies use Eclipse as their development environment. You can download Eclipse for your own home use.

Install JDK, Eclipse and PDT from Zend

  • Install Oracle Java JDK
    Select the correct version for your OS
    Use Google to find out how to configure JDK for windows,
  • Download Eclipse and PDT All-In-One Package from Zend
    Select the correct version for your OS, i.e., Windows, Linux or Mac OS X.

Create a PHP Project

The following steps demonstrate using Eclipse to create a PHP project with HTML and PHP files:

  1. Under the Linux "Applications" Menu, select "Programming" > "Eclipse For PHP"
  2. The first time you run Eclipse you will see this dialog box. You can click on the check box and click "OK" to continue

    create PHP project

  3. Create a "PHP Project"

    create PHP project

  4. Enter a PHP project name, for example, "lab0_php_prj". Select "Create project at existing location..." and click on "Browse"

    php project name

  5. Make sure that your username is selected in the "Places" panel. Click on the "Create Folder" button. Type "public_html" and press the enter key. Then, click on "OK"

    php project name

  6. Double check that your directory is "public_html" and click on "Finish"

    php project name

  7. To add an HTML file to the project, right click on "lab0_php_prj". From the pop-up menu, select New > HTML File

    add html file

  8. Enter an HTML file name, for example, "index.html". Click on the "Next" button to continue

  9. Select "New HTML Files (5)" as your HTML template:

    select html5 template

  10. Edit the HTML source code

    edit html source code

  11. Add a PHP file in the same manner as the HTML file. Right click on "lab0_php_prj". From the pop-up menu, select New > PHP File

    add php file

The following instructions are for creating php files in the later lab.

You do not need to do these steps now, these instructions are for PHP labs later.

  1. Enter a PHP file name, for example, "session.php". Click on the "Next" button to continue

    php file name

  2. Select a PHP template, for example, "New simple PHP file"

    selct php template

  3. Edit the PHP source code

    edit

  4. Close the whole project by right clicking and selecting "Close Project" from the pop-up menu

    close project

Problems with Eclipse IDE

If your Eclipse project was not setup properly, delete workspace directory and the .eclipse file from the home folder on your Linux machine. You do not need to delete publich_html directory or the .html files unless you want to start fresh from everything.

Hercules: Your Web Server

In the lab, your HTML, PHP, JS and CSS files will be stored on a web server, specifically, Hercules. The URL (address) of the Hercules server is www2.cs.uregina.ca. If someone requests your web page (http://www2.cs.uregina.ca/~your_username), Hercules searches your home directory for content inside a special directory called public_html. Your home directory is stored on Hercules and is the "starting" directory when you log on to Hercules or use the terminal in the Linux lab. To allow others to see your web pages, you need to: 1) store your source files, such as *.html, *.php, *.txt, *.jpg, in the public_html directory (located in your home directory), and 2) change the "permissions" of the files/directories.

Change Your Hercules Password

If you forget or want to change your hercules password, please go to this link.

https://www.cs.uregina.ca/Password/

Logging on to Hercules

From the Linux machines in the lab, you can log on to Hercules from the command-line:

  • Start a Linux command-line window (a terminal)
  • Type the following command:
    ssh hercules
    If it is successful, a welcome message is displayed on the screen.

Note: If you open a "terminal" on the Linux machines, you will see all of your Hercules files and directories. This does not mean that you are on Hercules. Pay attention to the terminal's prompt: a prompt such as a049510 indicates that you are on a Linux machine, whereas, a prompt such as hercules indicates that you are on Hercules.

Commands to Get You Started:

  1. Log into hercules: ssh hercules
  2. Change the permissions on your home directory: chmod 711 ~
    (to "list" the detailed information about your files: ls -l)
  3. If you do not have one, create the "public_html" directory: mkdir public_html
  4. Change the permissions on your "public_html" directory: chmod 711 public_html
  5. Enter the public_html directory: cd public_html
  6. Edit the html file and save/upload into the public_html folder
  7. Change the permissions of:
    • all .html files: chmod 644 *.html
    • all .css files: chmod 644 *.css
    • all .jpg (pictures) files: chmod 644 *.jpg

Notes:

  • your web address (URL) is: http://www2.cs.uregina.ca/~username
  • the permissions on directories should be: 711, which means you can list contents and add files and execute (or change into) that directory; everyone else can only change into that directory.
  • the permissions on individual files, e.g., .html, .css, .jpg, or .gif, should be 644, which means you can view and modify the file; everyone else can can only view it.

Connecting to Hercules and Transferring Files at Home

For the CS215 class, all of the files will be stored on Hercules but you can modify and change them directly from the Linux machines (because of something called mounting). For most of the labs, you can work exclusively on the Linux machines. However, if you work on lab assignments or class projects from home, you will need to transfer your files to Hercules and ensure that everything works there.

On Mac OSX

You can connect to Hercules by typing the ssh command in the terminal (find the "terminal" by searching using Spotlight):

ssh your_cs_username@hercules.cs.uregina.ca

For transferring files you will need an ftp client, for example, Fugu or FileZilla:
http://www.uregina.ca/is/infrastructure/network/downloads/mac.html (your Novell login is required to download Fugu)

https://filezilla-project.org/

On Microsoft Windows

If you prefer doing your exercises from a Windows machine at home, you can use PuTTY to access Hercules.

The PuTTY terminal emulation program with SSH support is provided through the link below:
http://www.uregina.ca/is/infrastructure/network/downloads/windows.html (your Novell login is required to download PuTTY)

You can find the PuTTY settings guide at:
http://www.cs.uregina.ca/Technical/department/PuTTYforCS.html.

For transferring files, you need WinSCP secure copy client:
http://www.uregina.ca/is/infrastructure/network/downloads/windows.html

Learning HTML Tags

An HTML document can be described by a set of HTML tags. We will introduce several common HTML tags that can be used to produce a basic page with images, lists, tables and links.

Structure of HTML Documents and HTML Document Tags

The first thing in your HTML document is a <!DOCTYPE html> tag that specifies the correct version of HTML used throughout the document. The following link shows how to use a <!DOCTYPE> tag:

HTML document type declaration: http://www.w3schools.com/tags/tag_doctype.asp

Each HTML document has a root node, i.e., <html>...</html>. The <html> tag has two children: a head node <head>...</head> and a body node <body>...</body>. The following links provide details.

HTML document tags and the document structure: http://www.w3schools.com/html/html_intro.asp
HTML head: http://www.w3schools.com/html/html_head.asp

HTML Syntax (elements)

Each HTML tag consists of an opening and a closing, that is, <name>...</name>. Typically, you will write content between the opening and the closing tags. The content can be text or other HTML tags. Attributes can be added to an HTML tag, for example, <name attribute_name = "attribute_value">...content...</name>.

HTML elements: http://www.w3schools.com/html/html_elements.asp
HTML attributes: http://www.w3schools.com/html/html_attributes.asp

Document Structure Tags

Consider what you need when you write an article: a main title with subheadings and paragraphs. To create titles/headings in HTML, the format is: <h>...</h>, where a number appears after the h. For instance, h1 is the most important heading (like your title) and h6 is the least important (a sub-sub-sub-sub-subheading). Paragraphs are denoted with the opening and closing pair: <p>...</p>. Highlights such as bold (<strong>...</strong>), italics (<i>...</i>), and underlining (<u>...</u>) may be used during writing. The following links provide details.

HTML headings: http://www.w3schools.com/html/html_headings.asp
HTML paragraphs: http://www.w3schools.com/html/html_paragraphs.asp
HTML formatting: http://www.w3schools.com/html/html_formatting.asp

List Tags

List tags are an essential part of HTML. The three kinds of lists are: unordered lists (<ul>...</ul>), ordered lists (<ol>...</ol>) and description lists (<dl>...</dl>). In the ordered and unordered lists, a <li>...</li> tag is used around each list item. In the description list, a pair of term <dt>...</dt> tags and description <dd>...</dd> tags are used to define each list item. The following link provides details.

HTML lists: http://www.w3schools.com/html/html_lists.asp

Table Tags

To include tables in an HTML document, you will use the <table>...</table> tags. An HTML table contains captions (<caption>...</caption>) and rows (<tr>...</tr>). Each row contains columns, otherwise known as table data (<td>...</td>). The data for the first row is usually a set of headings denoted using (<th>...</th>) in place of the <td> pair. The following link provides details.

HTML tables: http://www.w3schools.com/html/html_tables.asp

Image Tags

The most commonly used formats for image files are GIF (graphic interchange format), JPEG (joint photographic experts group) and PNG (portable network graphics). To insert images into a web page, you use the tag: (<img src="..." alt="..." />), where a source attribute, i.e., src, and an attribute for alternative text, i.e., alt, should be specified. A width attribute and a height attribute can be used optionally. However, it should be pointed out that arbitrary use of these two attributes may distort (squish or stretch) the image. The following links provide details on using images tags.

HTML images: http://www.w3schools.com/html/html_images.asp

Tags for Links

Links can be considered the most important element of an HTML document. Without HTML links, there would be no "surfing the web" as you know it. The use of links, i.e., <a href="">...</a> enable us jump from one page to another with a simple click. There are two ways of specifying a web address: either as a relative address or an absolute address. In addition, you may use an <id> attribute to create bookmarks (places to jump) within an HTML document.

HTML links: http://www.w3schools.com/html/html_links.asp

HTML Block and Inline elements

All HTML elements can be categorized into two types: inline elements and block elements. Inline elements do not explicitly include a line break and the content appears on the current line (or, as the name implies, "in-that-line"). Examples of inline elements are: <td>, <a>, and <img>. By contrast, block elements normally start and end with an implicit new line. For example, <table>, <div>, <p> and <h1> tags are block elements.

HTML blocks: http://www.w3schools.com/html/html_blocks.asp

Other Features

HTML entities: http://www.w3schools.com/html/html_entities.asp

HTML symbols: http://www.w3schools.com/html/html_symbols.asp

Character encoding: http://www.w3schools.com/html/html_charset.asp

URL and URL encoding: http://www.w3schools.com/html/html_urlencode.asp

XHTML vs HTML5

XHTML is HTML redesigned as XML. It provides more strict syntax rules than HTML. HTML5 is a newly designed specification with more advanced features (such as tags for adding video, audio, and graphics and additional functionality). Currently, most modern web browsers support this specification. The following links provide the details of the two specifications.

What is XHTML: http://www.w3schools.com/html/html_xhtml.asp
What's new in HTML5: http://www.w3schools.com/html/html5_intro.asp

HTML Validation

Through a W3C validator, all errors and potential problems in your HTML code can be identified. To ensure that you are coding correctly, this lab requires that all your HTML code be validated. To do this, you need to copy your URL address into the text box provided by the following W3C validation service web site:

The W3C Markup Validation Service: http://validator.w3.org

Rules for Writing HTML5 in XHTML Format

In the lab, we will be writing HTML5 but adhering to the strict rules of XHTML to encourage proper programming habits. Therefore, you should be aware of the following XHTML syntax rules:

1. case sensitivity
all tags and attributes must be in lower case
2. closing tags
all tags must be closed
3. quoted attribute values
all attribute values must be in quotes
4. explicit attribute values
all attributes must be specified by assignment
5. id and name attributes
only use name for form elements; use id everywhere else it is needed
6. element nesting
the rules for element nesting must be followed. Most important, a block element cannot be nested in an inline element.

Validating HTML5 as XHTML1.1

In order to validate your HTML5 as XHTML, you need to modify some of the content to ensure it is valid XHTML:

  • replace the <!DOCTYPE html> with
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  • add the xmlns attribute to <html> tag, that is, using the following html tag:
    <html xmlns = "http://www.w3.org/1999/xhtml">
  • comment out the character set line:
    <meta charset = "utf-8">
    A comment in HTML is anything between the following two partial tags: <!-- Comments are here -->

HTML Forms

You have all encountered HTML forms when you make an online purchase and fill in your address and information. You will be learning how to create a basic HTML form (i.e., <form action="" method="">...</form>). In a form tag, an action="process.php" attribute specifies a server-side program that is waiting to process the user inputs; in this example, the program is php code saved in the "process.php" file. A method="post" attribute specifies the type of method, which will be either get or post, used for submitting the information. With the help of HTML input elements (i.e., <input type="" name="" />), different types of content can be collected. To summarize, we have three types of input elements. The first type is for plain text and includes text, password and textarea. The second type provides options for choices and includes radio, checkbox and select. The third type is for submitting or resetting user inputs and includes submit and reset. All form elements need to have a <name=""> attribute specified. For working with JavaScript, one can specify an extra <id> attribute, for example, <input type="text" name="first_Name" id="first_Name" />. The following links provide details.

HTML form tag and attributes: http://www.w3schools.com/html/html_forms.asp

HTML input types: http://www.w3schools.com/html/html_form_input_types.asp

More input elements: http://www.w3schools.com/html/html_form_elements.asp

Structure of a PHP web Project

In order to maintain a nice project structure, you need to carefully design the directories to store your HTML pages, PHP scripts, styles sheets, JavaScript files, and resources such as images. The following gives you a sample structure of a web project.

--public_html/;
  +--index.html (or index.php)
  +--basic_html_pages/
	+--introduction.html
	+--friends_list.html
	+--login_form.html
	+--register_form.html
  +--php_services/
	+--add_a_user.php
	+--post_a_message.php
	+--display_messages.php
  +--includes/
	+--db_connect.php
	+--header.php
	+--footer.php
	+--functions.php
  +--images/
	+--profile1.png
	+--profile2.jpg
	+--profile3.png
	+--profile3.gif
  +--css/
	+--style.css
  +--scripts/
	+--validation.js
	+--display_messages.js
  +--lib/
	+--dojo.js
	+--jquery.js
 

The public_html is the root folder of your project/website. In the root folder, you will have the index.html(index.php) file as your home page. All your additional HTML pages, for example, introduction.html, can be put into the basic_html_pages folder. You can put the server side scripts, for example, PHP files, into a php_service folder. Commonly used PHP functions including header and footer information should be put into the includes folder. Image files, CSS files and external JavaScript files can be put into the images, css and scripts folders, respectively. If you would like to download third party libraries, you should put them into the lib folder.

Note: This provides an example of what might be done in industry. For the lab, you will be creating separate directories for each lab to nicely organize your work incrementally. For each assignment, you should also create a unique directory.

In Class Exercise Lab Assignment

Create two files "index.html" and "signup.html" in your public_html directory.

The "index.html", consists of the following information:

  1. The title of your web site (as a main heading).
  2. Information about yourself.
  3. Classes you have taken and are now taking.
  4. Create a link in the "index.html" page to the "signup.html" page.
  5. links to directly validate your pages.

A sample of a personal web site is provided below (you do not need to make it exactly the same; instead, use your imagination):
An example of a personal website

A sample signup.html is provided below:
signup

Upload the zipped html files to URcourses before 11:55PM today. For detail, please see How to submit Lab assignments.

Important Note: Your HTML5 documents may not pass XHTML1.1 validation. Some HTML5 tags do not exist in XHTML and will, therefore, not pass validation. However, you must make sure your web pages do not contain any syntax errors according to XHTML. That is, some errors are allowed. For example, when using the HTML5 <article> tag, you will have an error message: "element 'article' undefined"; you may also have an error such as "there is no attribute id" when you use something like <section id="mysecid">. Syntax errors according to XHTML (i.e., a paragraph tag without a closing, an image tag without a back slash, or an embedded block element inside a non-block element) are not allowed.

Reminders:

  1. To change directories, the command is "cd" : i.e.,  cd public_html
  2. Permissions for directories should be 711: i.e.,  chmod 711 public_html
  3. Permissions for all .html files should be 644: i.e.,  chmod 644 *.html
  4. your web address (URL) is:  http://www2.cs.uregina.ca/~username