Linux Tutorial 8
Review
This will be a review of the past Linux and XHTML Tutorials.
First, you are going to SSH to the teacher's desktop using either PuTTy on Windows or with a Terminal window inside of Linux Mint.
PuTTY
1. Enter the IP address of the teacher's computer into PuTTY.
2. Enter your username and password into PuTTY. (Class 10b and 11 will get their usernames and passwords today in class).
3. You should be logged in.
In Linux Mint
1. Open a Terminal
2. Enter the below commands:
$ sudo ssh -l Your Username IP Address of Teacher's Computer
$ Enter Your Password
Create a Tutorial Folder
$ cd /usr/home/Your Username
$ mkdir Tutorial
$ cd Tutorial
Review Linux Commands
Before you continue, review Linux Tutorial 1. I will ask you some basic Linux Command Questions.
Review Nano
Now goto Linux Tutorial 2 and review how to use the Nano text editor.
Review Making a Website
You should be in the Tutorial directory.
$ pwd
/usr/home/Your Username/Tutorial
Now make a css folder and change directory into css:
$ mkdir css
$ cd css
$ pwd
/usr/home/Your Username/Tutorial/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/Your Username/Tutorial/
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="About Me"><strong>About Me</strong></a></li> <li><a href="page3.htm" title="My Family"><strong>My Family</strong></a></li> <li><a href="page4.htm" title="My School - AIS"><strong>My School - AIS</strong></a></li> <li><a href="page5.htm" title="My Future Goals"><strong>My Future Goals</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> About Me </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>: About Me </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="About Me"><strong>About Me</strong></a></li> <li><a href="page3.htm" title="My Family"><strong>My Family</strong></a></li> <li><a href="page4.htm" title="My School - AIS"><strong>My School - AIS</strong></a></li> <li><a href="page5.htm" title="My Future Goals"><strong>My Future Goals</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> My Family </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>: My Family </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="About Me"><strong>About Me</strong></a></li> <li><a href="page3.htm" title="My Family"><strong>My Family</strong></a></li> <li><a href="page4.htm" title="My School - AIS"><strong>My School - AIS</strong></a></li> <li><a href="page5.htm" title="My Future Goals"><strong>My Future Goals</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> My School - AIS </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>: My School - AIS </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="About Me"><strong>About Me</strong></a></li> <li><a href="page3.htm" title="My Family"><strong>My Family</strong></a></li> <li><a href="page4.htm" title="My School - AIS"><strong>My School - AIS</strong></a></li> <li><a href="page5.htm" title="My Future Goals"><strong>My Future Goals</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> My Future Goals </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>: My Future Goals </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="About Me"><strong>About Me</strong></a></li> <li><a href="page3.htm" title="My Family"><strong>My Family</strong></a></li> <li><a href="page4.htm" title="My School - AIS"><strong>My School - AIS</strong></a></li> <li><a href="page5.htm" title="My Future Goals"><strong>My Future Goals</strong></a></li> </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 Tutorial 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.
Edit your CSS
Now, review CSS Tutorial 1 and then edit your ais.css file located in /usr/home/Your Username/Desktop/Tutorial/css
You will finish editing this website on Thursday. On Friday you will have a quiz based on this Tutorial.
This is the end of Tutorial 8.