Math 171 - Alexiades
Lab 6
Creating your own web page
You have been using web pages since day one in this course, and
we have discussed the Internet,
World-Wide-Web, and HTML in class.
Now you know all you need to create your own web page !
A. Here is a template page with some essentials. Follow the steps:
(THIS HAS NOTHING TO DO with Matlab, of course!)
1. On your machine, create a Lab6 directory (folder) and in it create a PLAIN TEXT file index.html .
Pay attention where the file is, its full path, you'll need to view it on a browser later.
Open the file in a PLAIN TEXT editor, and copy/type everything between the dashed lines into it,
BUT ommit the blank space after each "<" and each "&" .
I had to insert blanks to break the HTML, so that the tags show instead of being rentered!
------------------------------------------------------------------
< HTML>< head>
< title> My First Homepage </title>
</head>
< !-- red on black, cyan Note: this is a comment -->
< BODY bgcolor="#000030" text="#ff0000" link="#00ffff"
vlink="#00ffff" alink="#FF0000">
< !----- black on lightyellow, blue, magenta (commented out)
< BODY bgcolor="#FFFFCC" text="000000" link="#FF0000" vlink="#FF00FF">
----->
< FONT SIZE="+1">< I> Home Page under Construction </I></FONT>
< HR SIZE="1">
< CENTER> < H1>
?????? 's Homepage
</H1> </CENTER>
< HR width="70%">
< H2> Some Favorite Web Sites: </H2>
< !-- here is a numbered list -->
< OL>
< LI> < a href="http://www.utk.edu/">
< B> UTK </B> </A>
< P>
< LI> < a href="http://volweb.utk.edu/~YOUR_NetID">
< B> My own web page on VOLWEB !!! </B> </a>
< /OL>
< HR SIZE="3">
(make this centered, bold, and bigger size)
Math 171 Pages
< !-- here is an unnumbered list -->
< UL>
< LI> < a href="http://www.math.utk.edu/">
< B> UTK Mathematics Dept. </B> </A>
< LI> (insert a link to the Math171 course page here)
< LI> < a href="https://www.youtube.com/watch?v=OmJ-4B-mS-Yt"> < B>
The Map of Math < /B>< /A>, (video) by Dominic Walliman.
< /UL>
< HR SIZE="3">
< PRE> Preformated text. Type a couple of lines here
to see what happens, e.g. your name, major, ...
< /PRE>
< HR size="4">
< ADDRESS>
email: & nbsp; < a HREF="mailto:?????@vols.utk.edu"> ?????@vols.utk.edu </A>
</ADDRESS>
< I> & copy;2018 & nbsp; ????? </I>
& nbsp; < font size="-2"> Last modified: 1 Sep 2020 </font>
< /BODY>
< /HTML>
------------------------------------------------------------------
2. Save the file. To see it on your browser:
open a new browser window (or a new tab), and go to index.html
(full path to index.html, perhaps file:///C:/...../Lab6/index.html ).
There you have it!
Move/shrink the browser and your editor window side-by-side
so you can see both, to observe how each HTML directive is rendered.
Observe that most HTML markup tags come in pairs:
<html> ... </html>
<title> ... </title>
<body> ... </body>
<center> ... </center>
<font> ... </font>
<h1> ... </h1> , <h2> ... </h2>
<ol> ... </ol> , <ul> ... </ul>
<b> ... </b> , <i> ... </i>
The all important Anchor: <a href=...> ... </a>
with the web address (URL) specifier: href="..."
And some tags don't have (or do not require) a closing match: <br> , <hr> , <p>
Note that HTML is NOT case sensitive, so <b> is same as <B>,
and spaces/new lines are ignored.
What draws a separator line ? What prints italics ? bold ?
3. In your index.html, replace each "?????" with your name.
To see the changes, Save (the file in the editor) and
Reload the page on the browser.
4. Fix whatever else needs to be fixed up.
In particular, replace the "YOUR_NetID" with the real thing.
Save and reload the page.
Fix your email address at the bottom. Test it by sending yourself
a message. Did it work? Should it work?
5. Change some things, like putting your name in the title, altering some of the SIZE values, etc.
Remember to save the file and reload it on the browser after each change.
Experiment a bit to see how things work.
Change the URLs in the unnumbered list to other sites.
6. Want to learn more about HTML tags ? there are many more, and
more are created with each new version of HTML...
Here is a resource for HTML5:
HTML Introduction , and another:
HTML Beginer's Tutorial.
... come back to it later, in your spare time ...
B. Posting page on the UTK web-server
Great, now you have a web page but nobody else can access it !
To "publish" it takes quite a bit more work... you need:
1. UTK Linux account ,
2. SSH to login to it ,
3. SCP to transfer files to it.
Here is some basic info:
Website Hosting
and VOLWEB
At the bottom of VOLWEB page, click "Sign up" for a Linux account.
Hope it will work...
On your machine, install PuTTY or WinSCP (on Windows), Fetch (on Mac)
see
SSH/SFTP clients
configure clients
OIT Knowledge Base
Login to your new Linux account on
linux.oit.utk.edu using an SSH client:
Mac OS-X already has SSH, do: ssh Your_NetID@linux.oit.utk.edu
Win: use WinSCP to connect to linux.oit.utk.edu ,
then click "Commands", click "Open in PuTTY"
Transfer your "index.html" file to the web-server using SCP client (WinSCP / Fetch)
On the server:
When you login to the Linux server, you will be in your "home dir":
pwd will show full path,
will be: /home/Your_NetID
See what files are there: ls -lF
"index.html" will be there after you transfer it.
Check if "public_html" exists.
If not, create a directory named "public_html":
mkdir public_html
It needs to have permissions: drwx--x--x ,
check with: ls -lF ,
and if it is not,
you can set it: chmod a+x public_html
Copy your "index.html" file into the "public_html" dir
with name "default.html":
cp index.html public_html/default.html
Go to the sub-dir public_html: cd public_html
and ls -l
permissions must be: -rw-r--r-- , check it!
If not, make it readable by all:
chmod a+r default.html
The URL of your very own web page will be:
http://volweb.utk.edu/~USER
where USER is your NetID
Click on it. It will fail till you do what you must !
You'll know you did it right when you can see your page with
"http://volweb.utk.edu/~USER showing in the URL !
Don't confuse where what you see is coming from.
One is the local file "index.html" on your machine,
with URL: file:... (which nobody else can see).
The other is the "published" page, in your public_html/ dir
on the server, with URL: http://volweb.utk.edu/...
(which the UTK web server serves to the world).
C. Finally, submit your homepage on Canvas, no, NOT the file,
just insert its URL on Canvas !!! so I can admire it...
Now you can brag to your friends that you created your own web
page (...almost) from scratch !
And when you have some time to spare, check out the many links
on Internet - WWW - HTML
Have fun ! All done !