This week, we will build off of the basic HTML skills covered last week. This page contains additional information about the HTML interpretive language. After learning the information on this page, you will have enough skill in designing web pages to say that you "program in HTML" - and you thought computer science was boring, didn't you!!!
This lab contains a number of more advanced HTML design skills. This lab will introduce the concepts of tag attributes, html versions, tables, columns, and web programming in Java or JavaScript.
|
Last week we learned about many different tags (such as: <HEAD>, <IMG>, or <H1>. Manyof these tags also have attributes associated with them. An attribute is a modification of the existing tag which adds information to it. Attributes are always enclosed between the "<" and ">" symbols.
An example of a tag and attribute you are already familiar with is the image tag <IMG>. In order to make this tag work, an address needs to be supplied for the image, by using SRC=filename. The connection of the file and attribute leaves the final command of <img src="filename">.
As you will find in the examples below, some tags can have many different tags. Of these, some are required, while most are optional. The use of tags generally depends on how tight of control you wish to have over your webpage.
You generally have only one choice when deciding how to specify the background for your page(s). Most of the recent browsers can load images as backgrounds, but it is important that you make sure that your text can be read easily when placed on top of the image.
A browser can create a background from a small image by a process called tiling, whereby the image gets repeated across and down the width and length of your page to fill the browser window. The command you use is called BACKGROUND, and you place it within the <BODY> tag of your HTML document.
A table is a method of producing data in a more controlled format. As you have learned with Excel and Word, a table is a collection or rows and columns, the intersection of which forms a cell.
One of the nice things about using tables in HTML programming is that browsers generally format multiple rows of data into a neat, orderly fashion. This includes text, pictures and links. Some strong uses of tables can be found here and here.
Tags commonly used with tables include:
<table border=2> General table tag, with a border <tr> The start of a table row <td> The start of a table cell <th> This cell contains a table header Don't forget to close the tags when you're done with them. Additional information will be included in the advanced section of the tutorial.
Just in case you figure out how to do something that looks Totally cool!!!, but you don't want to include it on your page, you can include it in a comment.A comment is a part of your HTML program that doesn't show up on the screen. Anything included between the comment open <!-- and the comment close --> will be completely invisible to the viewer. That way, additional information can be kept for those who look at your source code, or for you when you look at it later.
<!-- Ha ha, no one will notice this code --> Back to Menu
If you've ever clicked on a table of links located at the top of these lab pages. What you've followed is an internal link. An internal link differs from a regular link by connecting to a section of a page.
To do this, two tags are utilized; where you are linking from, and where you are linking too. Lets say I wanted to connect with the section on background images. Down here, I would want to put an anchor tag that used a "#" in it's address. So, let's call this section bg (for BackGround). What I would create is a link that says:
<A href=#bg>whatever I want to click on</A>
This will connect me to a place up above that I include a NAME tag. Since, I stated that this link would connect with the section bg I want to put a tag up at the start of the background section that says:
<A NAME="#bg">
Which is what's looked for when a link has a # in it.
ADVANCED Back to Menu
By now you should be familiar with the hr command. Time to introduce it's attributes. <hr> - a line
<hr width="50%"> - halfway across the page (50%)
<hr size="10"> - a thick line
<hr noshade width="90"> - an unshaded line 50 pixels long
<hr width="40" align="right"> - right alignment
For fun, try putting a rule in a table, or multiple rules growing and shrinking.
Font is an alternative to those <H1> through <H6> commands. Here are a few uses of font and it's attributes.<font size="7"> This is the biggest font</font>
<font size="1" color="red"> The smallest red font!!!</font>
<font size="+1" color="#ff08d6"> Slightly bigger font using a hexadecimal color</font>
<font color="blue"> fonts can even be <font color="red">overlayed</font> and this is how they would work</font>. Got it?
By now you should have a fair idea of how to align and resize images, if not, click here.One additional way to use images, is by making them clickable links. This is done by putting a link in the middle of an achor tag. So, if I'd like to go somewhere, I could try this.
<a href="html.html"> <img src="images/html.gif"> </a>
![]()
<a href="mailto:ddoyle@davedoyle.com"> <img src="images/email.gif" border="0"> </a>
![]()
Try making an image into a link, and turn the blue border on and off.
Tables can become more and more complex. They can be centered, their contents can be centered, they can have borders or not, or cells can fill multiple rows or columns. Below is a more complex table, as a programmer, see if you can figure out which attributes cause which. The code:<table border="6" cellspacing="5"><tr> <td colspan="2" bgcolor="yellow"><img src="images/catbert.gif" align="middle"> Worship me!</td> <td><font color="#afafaf"><center>Strange occurances we have going on here, don't you agree???</center></font></td> </tr><tr> <td bgcolor="gray"><img src="images/bug.gif"></td><td></td> <td rowspan="2"><img src="images/bug.gif" align="right">Squish me like <br>the bug I am!</td> </tr><tr> <td cellpadding="10"><a href="index.html">Bring me home!!!</a></td> <td><hr width="200"> <hr width="50%"> <hr width="25%"> </td> </tr></table>The table:
Worship me!
Strange occurances we have going on here, don't you agree??? Squish me like
the bug I am!Bring me home!!! Back to Menu
Java and JavaScript are two programming languages that allow additional stuff to happen on pages. Whether it be things that move, appear or just change on their own, these languages can often time be blamed.By playing with these types of code, you can get a feeling for real programming. JavaScript is available right on the web page, and is generally contained in the comment. Java applets are often times included too, but are already compiled, and are no longer readible by humans.
Here is a simple example of some JavaScript. To see the code behind it, look at the source code for the page.
Back to Menu
To make your code accessable to people who don't happen to own your disk, you must put it onto a computer linked to the internet. The University has a few different servers which are. Two main ones being: gold.tc.umn.edu and maroon.tc.umn.edu
The email you sent out to webspace@tc.umn.edu will cause the University to set aside space on their computer to put your files in. In turn, these files are set up so that anyone in the world can see them, provided they have the web address of where they are located.
That part is easy. The harder part is getting used to playing within the UNIX environment, the operating system of WWW servers.
Just like on Windows 95, you will have files, and files have to be moved around. Unfortunately, UNIX is not a graphical environment instead, it relies solely on text. It also was created for computer geeks, and doesn't provide easy to find commands. So, the basic ones are summarized in the next few sections.
mv move a file or group of files from one place to another cp copy a file or group of files from one place to another rm this is how to permanently remove files ls this shows a listing of all the files in this folder (directory).
Again, to move from folder (directory) to folder (subdirectory) you will need to know certain commands. Below are a few of them.
pwd a way to find out what folder (directory) you currently are in. cd Change Directory to the new one you want to be in. mkdir Make a new directory named something rmdir Remove (delete) an empty directory named something
Permissions are a special code that give people permission to look at, run, or change your files. This can be a really tough area to understand, but it all boils down to this one command:
chmod -R 755 *
CAREFUL: What this command says, in english is: 'make all of the files in this folder and all of the folders in it readible and runnable by everyone, but don't let anyone but me change them'. Now, this isn't bad, but if you do this in the wrong place, and have things in your account you don't want people to see, people may be able to see them. To be safe just follow the guidelines below.
If you are the average user, which by definition, you generally are, you care as much about UNIX commands as you do the eating habbits of the Eastern Mongolian Guttersnipe (well, you know what I mean). So, to make it easier, just do this. Note: The quotation marks " are not to be typed. Just what is inside of them.
- Telnet to your account, and log in
- Choose 8, Special Utilities, and 3, Shell Access
- Type "pwd"
- This is where your webpage will be, memorize it, record it, and put it as a comment to your page.
- Did you write it down yet? Then do it!
- The path given should be of the form /home/gxxx/username where xxx are 3 different numbers.
- Type "cd /nlhome/gxxx/username". If you can do this, you have webspace.
- Type "ls"
- If you'd like to put your pictures, or other things, into a separate folder, type "mkdir foldername"
- Type "exit"
- Exit out of your account and telnet session, and go to an FTP program
- Log into your account and choose the pathname /nlhome/gxxx/username.
- Put all of the files into the folder.
- If you created an extra folder (such as "images"), be sure to change to that directory before you put the pictures in there.
- Exit the FTP program
- Go to Netscape and type the address: "http://www.umn.edu/nlhome/gxxx/username/filename.html" this will bring you to the front page of your webpage, and is the way everyone will access it.
This should take care of most everyone, but in case your files don't work (or if you are putting your files on a different server than gold or maroon, you may have to do the following...
- Telnet to your account
- Get to the shell access again (8,3)
- type "cd /nlhome/gxxx/username"
- type "chmod -R 755 *"
- type "exit"
- Exit your account and your telnet program.
However, if you are in a gold or maroon account, you shouldn't need to do this.
GOOD LUCK!! You may now go to the HTML Intro page, or
go directly to the exercise page.
pwd | a way to find out what folder (directory) you currently are in. |