Linux Tutorial 7
Class Project
Please Note: If you delete your classmates folders or files, move your classmate's folders and files, or shutdown your classmates laptops through the command line, you will FAIL the Class Project component of the class. You will also be reported to Mr. David.
Today you will start your Class Project. As per the Syllabus, you will have to create a 5 page Website using XHMTL and CSS. This will be an in-class Project. Please go over this Tutorial very carefully. Ask your Teacher or Classmates if you have any problems. All of your projects will be saved on the Teacher's PC-BSD laptop.
Task 1 - Create Website Folders and Templates
Log into PCLinuxOS and open up your Konsole window. Then SSH to the Teacher's laptop:
$ cd
$ su
Enter password:
$ root
$ /etc/init.d/sshd start
$ ssh -l username (The Teacher will provide username) 192.168.1.1 (The Teacher will provide the IP Address)
$ cd /usr/home/guest
$ pwd
/usr/home/guest
$ cd classproject
$ pwd
/usr/home/guest/classproject
You will create a folder with your name:
$ mkdir tommy Use ONLY LOWERCASE LETTERS!!!
$ cd tommy
Create a css folder and change directory into css:
$ mkdir css
$ cd css
$ pwd
/usr/home/guest/classproject/Tommy/css
Now download http://ais.saigonnezumi.com/css/ais.css and save it as ais.css in the css folder. Remember to use nano
$ nano ais.css
Control-x to save
$ ls
Be sure you see ais.css listed
$ cd ..
$ pwd
/usr/home/guest/classproject/Tommy/
You will now create 5 webpages.
Copy the entire XHTML below for index.htm:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="description" content="This web site was created by American International School Computer Science Students." /> <meta name="keywords" content="AIS, American International School, Saigon, Ho Chi Minh City, HCM, computer science, css, html, xhtml" /> <meta name="author" content="AIS Student" /> <meta name="Copyright" content="Copyright (c) 2008 by AIS Student" /> <title> Your Name Goes Here </title> <link href="css/ais.css" type="text/css" rel="stylesheet" /> </head> <body id="ais"> <div class="hide">Skip to: <a href="#ais-navigation" accesskey="s" title="Skip Navigation">Site Navigation</a></div> <div id="content"> <div id="header" title="AIS Computer Science Class"> <ul id="mainnav" title="AIS Computer Science Class Horizontal Menu"> <li><a href="index.php" title="Link to AIS Computer Science Homepage">Home</a></li> </ul> </div> <a id="top"></a> <div id="breadcrumb" title="AIS Computer Science web site Breadcrumbs"> Your are here: Home </div> <div id="navAlpha"> <h4 id="navigation" title="Site Navigation">Site Navigation</h4> <ul id="navlinks"> <li><a href="index.htm" title="Return to the AIS Computer Science Website homepage" accesskey="h"><strong>Site Home</strong></a></li> <li><a href="page2.htm" title="Page 2"><strong>Page 2</strong></a></li> <li><a href="page3.htm" title="Page 3"><strong>Page 3</strong></a></li> <li><a href="page4.htm" title="Page 4"><strong>Page 4</strong></a></li> <li><a href="page5.htm" title="Page 5"><strong>Page 5</strong></a></li> </ul> </div> <div id="main"> <h1>American International School</h1> <h2>Class Project</h2> <p> Insert text here </p> <p><a href="#top" title="Link to the top of the web page">Top</a><br /><br /></p> </div> </div> <div id="validate" title="AIS Student</strong> All Rights Reserved.<br /> Web site URI: <a href="index.htm" title="AIS Computer Science URL">http://ais.saigonnezumi.com</a><br /> </div> </body> </html>
$ nano index.htm and paste the entire XHTML. Save as index.htm.
Copy the entire XHTML below for page2.htm:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="description" content="This web site was created by American International School Computer Science Students." /> <meta name="keywords" content="AIS, American International School, Saigon, Ho Chi Minh City, HCM, computer science, css, html, xhtml" /> <meta name="author" content="AIS Student" /> <meta name="Copyright" content="Copyright (c) 2008 by AIS Student" /> <title> Your Name Goes Here Page 2 </title> <link href="css/ais.css" type="text/css" rel="stylesheet" /> </head> <body id="ais"> <div class="hide">Skip to: <a href="#ais-navigation" accesskey="s" title="Skip Navigation">Site Navigation</a></div> <div id="content"> <div id="header" title="AIS Computer Science Class"> <ul id="mainnav" title="AIS Computer Science Class Horizontal Menu"> <li><a href="index.php" title="Link to AIS Computer Science Homepage">Home</a></li> </ul> </div> <a id="top"></a> <div id="breadcrumb" title="AIS Computer Science web site Breadcrumbs"> Your are here: <a href="index.htm" title="Link to Home Page">Home</a>: Page 2 </div> <div id="navAlpha"> <h4 id="navigation" title="Site Navigation">Site Navigation</h4> <ul id="navlinks"> <li><a href="index.htm" title="Return to the AIS Computer Science Website homepage" accesskey="h"><strong>Site Home</strong></a></li> <li><a href="page2.htm" title="Page 2"><strong>Page 2</strong></a></li> <li><a href="page3.htm" title="Page 3"><strong>Page 3</strong></a></li> <li><a href="page4.htm" title="Page 4"><strong>Page 4</strong></a></li> <li><a href="page5.htm" title="Page 5"><strong>Page 5</strong></a></li> </ul> </div> <div id="main"> <h1>American International School</h1> <h2>Class Project Page 2</h2> <p> Insert text here </p> <p><a href="#top" title="Link to the top of the web page">Top</a><br /><br /></p> </div> </div> <div id="validate" title="AIS Computer Science Website Copyright"> Copyright ©2008 by <strong>AIS Student</strong> All Rights Reserved.<br /> Web site URI: <a href="index.htm" title="AIS Computer Science URL">http://ais.saigonnezumi.com</a><br /> </div> </body> </html>
$ nano page2.htm and paste the entire XHTML. Save as page 2.htm.
Copy the entire XHTML below for page3.htm:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="description" content="This web site was created by American International School Computer Science Students." /> <meta name="keywords" content="AIS, American International School, Saigon, Ho Chi Minh City, HCM, computer science, css, html, xhtml" /> <meta name="author" content="AIS Student" /> <meta name="Copyright" content="Copyright (c) 2008 by AIS Student" /> <title> Your Name Goes Here Page 3 </title> <link href="css/ais.css" type="text/css" rel="stylesheet" /> </head> <body id="ais"> <div class="hide">Skip to: <a href="#ais-navigation" accesskey="s" title="Skip Navigation">Site Navigation</a></div> <div id="content"> <div id="header" title="AIS Computer Science Class"> <ul id="mainnav" title="AIS Computer Science Class Horizontal Menu"> <li><a href="index.php" title="Link to AIS Computer Science Homepage">Home</a></li> </ul> </div> <a id="top"></a> <div id="breadcrumb" title="AIS Computer Science web site Breadcrumbs"> Your are here: <a href="index.htm" title="Link to Home Page">Home</a>: Page 3 </div> <div id="navAlpha"> <h4 id="navigation" title="Site Navigation">Site Navigation</h4> <ul id="navlinks"> <li><a href="index.htm" title="Return to the AIS Computer Science Website homepage" accesskey="h"><strong>Site Home</strong></a></li> <li><a href="page2.htm" title="Page 2"><strong>Page 2</strong></a></li> <li><a href="page3.htm" title="Page 3"><strong>Page 3</strong></a></li> <li><a href="page4.htm" title="Page 4"><strong>Page 4</strong></a></li> <li><a href="page5.htm" title="Page 5"><strong>Page 5</strong></a></li> </ul> </div> <div id="main"> <h1>American International School</h1> <h2>Class Project Page 3</h2> <p> Insert text here </p> <p><a href="#top" title="Link to the top of the web page">Top</a><br /><br /></p> </div> </div> <div id="validate" title="AIS Computer Science Website Copyright"> Copyright ©2008 by <strong>AIS Student</strong> All Rights Reserved.<br /> Web site URI: <a href="index.htm" title="AIS Computer Science URL">http://ais.saigonnezumi.com</a><br /> </div> </body> </html>
$ nano page3.htm and paste the entire XHTML. Save as page 3.htm.
Copy the entire XHTML below for page4.htm:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="description" content="This web site was created by American International School Computer Science Students." /> <meta name="keywords" content="AIS, American International School, Saigon, Ho Chi Minh City, HCM, computer science, css, html, xhtml" /> <meta name="author" content="AIS Student" /> <meta name="Copyright" content="Copyright (c) 2008 by AIS Student" /> <title> Your Name Goes Here Page 4 </title> <link href="css/ais.css" type="text/css" rel="stylesheet" /> </head> <body id="ais"> <div class="hide">Skip to: <a href="#ais-navigation" accesskey="s" title="Skip Navigation">Site Navigation</a></div> <div id="content"> <div id="header" title="AIS Computer Science Class"> <ul id="mainnav" title="AIS Computer Science Class Horizontal Menu"> <li><a href="index.php" title="Link to AIS Computer Science Homepage">Home</a></li> </ul> </div> <a id="top"></a> <div id="breadcrumb" title="AIS Computer Science web site Breadcrumbs"> Your are here: <a href="index.htm" title="Link to Home Page">Home</a>: Page 4 </div> <div id="navAlpha"> <h4 id="navigation" title="Site Navigation">Site Navigation</h4> <ul id="navlinks"> <li><a href="index.htm" title="Return to the AIS Computer Science Website homepage" accesskey="h"><strong>Site Home</strong></a></li> <li><a href="page2.htm" title="Page 2"><strong>Page 2</strong></a></li> <li><a href="page3.htm" title="Page 3"><strong>Page 3</strong></a></li> <li><a href="page4.htm" title="Page 4"><strong>Page 4</strong></a></li> <li><a href="page5.htm" title="Page 5"><strong>Page 5</strong></a></li> </ul> </div> <div id="main"> <h1>American International School</h1> <h2>Class Project Page 4</h2> <p> Insert text here </p> <p><a href="#top" title="Link to the top of the web page">Top</a><br /><br /></p> </div> </div> <div id="validate" title="AIS Computer Science Website Copyright"> Copyright ©2008 by <strong>AIS Student</strong> All Rights Reserved.<br /> Web site URI: <a href="index.htm" title="AIS Computer Science URL">http://ais.saigonnezumi.com</a><br /> </div> </body> </html>
$ nano page4.htm and paste the entire XHTML. Save as page 4.htm.
Copy the entire XHTML below for page5.htm:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="description" content="This web site was created by American International School Computer Science Students." /> <meta name="keywords" content="AIS, American International School, Saigon, Ho Chi Minh City, HCM, computer science, css, html, xhtml" /> <meta name="author" content="AIS Student" /> <meta name="Copyright" content="Copyright (c) 2008 by AIS Student" /> <title> Your Name Goes Here Page 5 </title> <link href="css/ais.css" type="text/css" rel="stylesheet" /> </head> <body id="ais"> <div class="hide">Skip to: <a href="#ais-navigation" accesskey="s" title="Skip Navigation">Site Navigation</a></div> <div id="content"> <div id="header" title="AIS Computer Science Class"> <ul id="mainnav" title="AIS Computer Science Class Horizontal Menu"> <li><a href="index.php" title="Link to AIS Computer Science Homepage">Home</a></li> </ul> </div> <a id="top"></a> <div id="breadcrumb" title="AIS Computer Science web site Breadcrumbs"> Your are here: <a href="index.htm" title="Link to Home Page">Home</a>: Page 5 </div> <div id="navAlpha"> <h4 id="navigation" title="Site Navigation">Site Navigation</h4> <ul id="navlinks"> <li><a href="index.htm" title="Return to the AIS Computer Science Website homepage" accesskey="h"><strong>Site Home</strong></a></li> <li><a href="page2.htm" title="Page 2"><strong>Page 2</strong></a></li> <li><a href="page3.htm" title="Page 3"><strong>Page 3</strong></a></li> <li><a href="page4.htm" title="Page 4"><strong>Page 4</strong></a></li> <li><a href="page5.htm" title="Page 5"><strong>Page 5</strong></a></li> </ul> </div> <div id="main"> <h1>American International School</h1> <h2>Class Project Page 5</h2> <p> Insert text here </p> <p><a href="#top" title="Link to the top of the web page">Top</a><br /><br /></p> </div> </div> <div id="validate" title="AIS Computer Science Website Copyright"> Copyright ©2008 by <strong>AIS Student</strong> All Rights Reserved.<br /> Web site URI: <a href="index.htm" title="AIS Computer Science URL">http://ais.saigonnezumi.com</a><br /> </div> </body> </html>
$ nano page5.htm and paste the entire XHTML. Save as page 5.htm.
You have now created your 5 webpages for your Class Project website. Just one more item:
$ mkdir images
You have created an images folder. This is where you will store your images for your class project. Please bring some images to the next class and I will upload it to your website for you.
At tomorrow's lesson, you will begin to add content and images to your websites.
Viewing your website from your computer
To view your website from your computer, first open up the Konqueror browsers.
Next, in the address bar, remove http:// and replace it with fish://
After fish://, you will write the username AND IP address of the teacher's computer.
For example:, fish://guest@192.168.1.1
When you are prompted to enter the password, write the password.
Continue your project by editing the CSS of your website. You can write some sample content for each 5 webpage if you like. We will leave most of it for next quarter.