Creating Web Pages at UTK (2)
There are a variety of ways to create web pages. There are web
editors such as Nvu, SeaMonkey (from Mozilla) (both are free),
Dreamweaver (not free). These pages you're looking at were
created on the PC in my office using SeaMonkey. The problem is
that you do not have control over what software is installed in the
labs at UTK. If you have a PC (or Mac, etc) in the dorm, at home,
etc, you can control what software gets installed.
One thing that can always work is to create web pages from scratch
using any text-based editor such as NotePad or the like.
Microsoft's Word, unless you know the tricks, and similar software that
can let you specify font size, italics, etc, has embedded commands that
tell your PC what font size, etc, to display. Web browsers need
their own special embedded commands for this--Word's embedded commands
do not work here.
HTML stands for HyperTextMarkupLanguage: it tells web clients how
to display pages on your browser.
HTML has many variations, and these include JavaScript and the like. To
view your HTML source code, you can click on "view" or an equivalent
button on your browser and then ask to look at the page source.
Some of this can be very complex, but here we'll run you through some
simple stuff that works. I teach CS 100--Introduction to
Computers and Computing. This is a literacy course running a
whole semester. I have my own web page for the course:my cs 100 web pages.
We'll be using some of these pages--you may want to bookmark the
site. About 2/3 of the way down the page you'll see a section
that starts with "Examples for simple HTML source". This has some
simple pages I created--these are intended for you to bring them up in
your browser and then to view source. So we'll look at page 1. (page 1).
This just has some black text on a white background. Things in
<>'s are usually html commands.
-----------------------------------------------------------------------------
<html>
this says the file is an html document
<body bgcolor="ffffff"
text="000000">
this says I want a white background and black text
<title>cs 100
stuff</title>
this tells the browser what to call this page
<h1> cs 100 test
</h1>
<h1> asks for a large type font </h1> closes this
<p>
this forces a new "paragraph" or line
<h3>
this says I want a medium size font between here and
when I close things off with </h3>
in your
browser...etc
this appears as I've typed it. browsers adjust lines to
fit the window size. <br> forces a new line
</h3>
this terminates the h3 size font
</html>
this terminates the html file
-------------------------------------------------------------------------
So let's create a simple page. You can either use the editor at
the "manage your website" location, or you can use NotePad on the PC to
do this, and then upload that file. At the "manage your website"
make sure you did a backup of default.html (which says "under
construction"). One way or another, we'll have a new default.html
in the proper place (it must be called default.html). Let's
assume that your
name is Donna Smith (you had NetID smith102). Then we can create
a file:
-----------------------------------------------------------
<html>
<body bgcolor="ffffff" text="000000">
<title> Donna Smith's first web page</title>
<h1> This is my first page! </h1>
</html>
--------------------------------------------------------
Very basic stuff, initially. Once you have this new default.html
properly in the public_html subdirectory,
open a new browser window and type in
http://web.utk.edu/~smith102 and you should see your page.
Anybody else in the world who know about the page can view it
also. You can add in some additional
text--play with the different font sizes (these typically run from h1
to h5, I think). Click the refresh icon on the browser as you
make changes to the page. Also--do periodic backups to save your
work.
Next, let's try changing the page's background color and text
color. bgcolor="ffffff" tells the browser that you want a
white background. "ffffff" consists of 3 pairs of hexadecimal
(base 16) digits--base 16 digits are 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f
(uppercase A-F also works). These 3 pairs control the red, green,
and blue intensities. Change bgcolor="ffffff" to bgcolor="00ffff"
or "00ff00" and see what happens after doing a refresh. Text
works the same way: "000000" is black. Change text--you can
try any combination--e.g. text="777777"--you can get some really ugly
combinations. Also realize that, say,
black text on a black background isn't readable. If you visit
some of the other pages (page2, etc) in that
section on my CS 100 web page, you'll see some more combinations.
One very helpful web site is
w3schools.com. On the left
menu under "tutorials", click on "learn html". On that page, on
the left menu, click on "HTML colors". This is one of many web
sites that will show you some of the color
combinations and the 6 hex digits that are used to get those
colors. So for now, try something that appeals to you--you can
always change this at any time.