Unless otherwise noted all text, pictures, captures and illustrations are by Mike Strong. Copyright 2012 Mike Strong, all rights reserved.

Quick and Dirty ...

Assignment Pages on the Web

For courses requiring assignments posted to the web
being taken by people who haven't had a pre-requisite course in web design

Mostly for 421 (streaming), 422 (writing), 423 (video editing)

1 - The assignments for these three classes are intended to be very quick and simple for you. This class simply has you add one more page to your existing web site, something you should be familiar with. It is assumed that you already have a website on the UMKC web servers and that you have already developed several pages as a result of the web design class (310) and therefore are very familiar with creating HTML pages and with linking one page to another.

2 - However, I have a lot of people showing up without the pre-requsite knowledge of how to create a web site (and I don't mean a blog or a Facebook page). Therefore, this "Quick and Dirty Guide" to creating just enough HTML code and then uploading that code to meet the course requirements of having published web pages on the UMKC web server.

This is not intended to be a full course, just a filler to get by.

3 - Before we go through a list of steps to setup your website and to make HTML pages you need to know ...

  1. Web pages are not magic, they are plain-text files, easily created in a text editor (such as Notepad in Windows, TextEdit in Mac)
  2. There are two locations for your text files with HTML tags:
    1. on the computer you are sitting at (local) and
    2. on the web server (this is a copy of the files on your local computer)
  3. All creation and editing of your HTML pages is done on your local computer ( you cannot do this on the web directly )
  4. Once the files work properly on your computer (local)
    1. upload a copy of these files to the web (remote) using an FTP program
    2. each file uploaded is now visible to the world at large
A USB drive is recommended as the location for your local web site files. A USB drive allows you to keep your files locally but also to bring them with you to campus should you need to work from campus or should you need to copy files from the USB drive directly to the web server.

 

You have a website at UMKC

(In case you didn't know)

A website was created automatically for you at UMKC when you first enrolled or when you were hired. This was created by a script (a program) run by the network admin workersMost people have no idea and most people have never used their website at UMKC.

Using this schema, enter the url you worked out for yourself in a browser and look at the page which comes up.

If your page looks like the text below it means you are looking at the page created automatically for you by the admin folks by running a script (light-weight program in text form).
For the example below, the actual username was replaced with "xyz123" as an example username. Otherwise this was copied directly from one of the UMKC websites.

Welcome to the personal web space of xyz123 at UMKC.

Please see http://www.umkc.edu/webguide/guidelines.asp for guidelines in setting up your web space, and for other helpful information.

1 - The page you are looking at is a file named "default.asp" and it has no <html></html> tags or other page structure to make it into a legitimate HTML page. It does have two paragraph tags <p></p> and <p></p> and your browser will read and display the file as a regular page. It is pretty minimal.

2 - This page causes most of you some confusion. That is because its filename "default.asp" is the first filename on the web server's list of default page names to look for when someone comes to your website without a specific file name (see the page on default filenames for more information). To make your site work for you it will be necessary for you to either totally re-edit this file and add structure to it or you will need to rename it and put your own default file on the sit in its place.

3 - Notice the link to a guidelines page. It doesn't work. It has not worked in years though I remember when it did work. Someone got rid of the page and didn't correct the link in the script which makes this page. This also causes confusion as well as consternation because many of you think your site doesn't work or that you broke something. You didn't. The right way to have done this was to keep the filename but cause the link to redirect to the new page. Ignore the error.

Your browser is designed to display the page on a website. It is not designed to allow you to edit or do other work on your site. For our purposes we will consider that to be the case for any browser. There actually is an exception (Amaya from w3c), a viewing/editing/collaborative tool.

 

Remember that you will need several tools to create and publish your web pages

  1. an editor (Notepad)
  2. a file mover (ftp program)
  3. a file viewer (browser)

 

Your Main Web Publishing Tools

 
1 - Text Editor - to create and edit text files

All HTML files are text files. The text you place in these HTML files contains the words you want to publish along with instructions for how you want the text to look (boldface, paragraph, etc.). The instructions are in the form of "tags" and are used to control the appearance of the plain-text words. The most common Windows text editor is Notepad.
(And never, ever use a word processor such as Word).

It is important to use a text editor at this point so that you understand directly the files and file locations. WYSIWYG HTML editors or instant-site interfaces disguise this, have their own learning curve with various methods and may tie you in to another service (iWeb) rather than any web host you would choose (for these lessons UMKC).

For now I want you to avoid Dreamweaver or iWeb or various CMS (content management systems) host interfaces. At this point I want you to be able to see and create basic HTML code. Later you will find the WYSIWYG editors extremely helpful, and even easier to understand once you get a small idea of how to roll your own code.

 

2 - FTP program - to copy your local files to the web (FileZilla)

Remember, we said that your HTML files will be kept in two locations: 1) on your local computer and 2) way out there on a web server (the actual web site). In order to copy your files from your computer to where the website's web server is located you will need a program whose job it is to transfer those files to your website's location on the world wide web. FTP stands for "file transfer protocol" and we speak about copying those files back and forth as FTPing the files. I recommend a nice (and free) FTP program called FileZilla. You can click here for my FileZilla tutorial.

It is important to use FileZilla so that your understand how to transfer your files for any website on any server anywhere in the world.

The only reason, at this point, for using direct access to your web files from on campus is to check your permissions to get to and modify or create files - in case you have problems.

 
3 - Browser - to confirm that your changes/uploads are working

The browser is designed to display web files (HTML files). Use your browser for both sets of files, the local and the web.
1 - On local files: use your browser to check out how well your edits work before you transfer them to the web. This is your "dev box" (development computer).
2 - Once you FTP the files to the web use your browser to make sure they are there and are working.

Some of you get a little confused when you use the browser thinking that this should give you editing access to your web site files directly. It won't. Don't waste you time or your worry. The browser is used to display pages, not edit them.

 

 

Quick Overview

Steps to Get an Assignment Page On the Web

(If you haven't already created your web site on UMKC)

Expanded Explanation (of overview just above)

First - Your Website Front Page (the default page)

If you already have a front page

You have this almost ready to go. You just need to create an assignment page then go back to the front (default) page and make a link to the assignment page.

Skip the "starting from scratch" and go to "assignment pages"

Or, If you are starting from scratch

On your hard drive (such as in "MyComputer") or on your USB stick create a folder called "MyWebSite" or some such similar name so that you will remember what it is the next time you see it. This is going to be the spot where you build the files you will upload to your actual web site. Because this is on your local computer, it is not a "web" site exactly. It is a Development Site and your computer is your "Dev Box." This is where you can edit your files and test them locally to make sure they work before sending them to the actual web. The actual web is a location on a host which is directly connected to the web. In this instance, the web server is at UMKC. We will get to that later in this "Quick & Dirty" lesson.

Within your "MyWebsite" folder do these things"

Create two folders (sub folders)
1 - a folder named "Media"
2 - a folder named "Images"

Create two blank files
1 - a file named "Default.htm"
2 - a file named (depending on class) "421Passignment.htm" or "422Passignment.htm" or "423Passignment.htm" or "424Passignment.htm"

Edit the file "Default.htm" using Notepad, or Textpad (do NOT, NOT, NOT use MS Word or other word processor). Word in particular loads the file with thousands bytes of useless code and produces code which often just doesn't work and is all but impossible to clean up properly.

Put this code in the "Default.htm" file:
Notes:
1 - instead of "Mary Awesome" use your own name
2 - instead of "421Passignment.htm" and "421 web streaming" in the link substitute the correct course number and name (if this is not your course).

Your default file's html code

On the left is what the actual HTML code looks like in a text editor such as Notepad. If you are working in a WYSIWYG HTML editor such as Dreamweaver use the "code" button to type this in. Never type this in the "Design" mode or the page will look like code (which it really won't be). The code you type in your text editor should display in your browser much like the right side below.
The HTML Code as seen in Notepad What it looks like (more or less) in the browser

<html>
<head>
<title>Mary Awesome's Web Site</title>
</head>

<body>

<h1>Mary Awesome's Web Site</h1>

<p><a href="421Passignment.htm">421 web streaming assignment</a></p>

</body>
</html>

 Mary Awesome's Web Site

Mary Awesome's Web Site

421 assignment

Click Here for more information about default files (opening pages).

Second - Assignment Pages

If you have more than one course then create additional links

Now edit the assignment page in the text editor (such as Notepad) and place this bare structure in the file.

HTML code for an assignment file

Note: in this illustration we are using 421P as an example. The same code works for the other class assignment pages, just make sure you change the page name and the headline text at the top to list the right class.
The HTML Code as typed into your text editor What it looks like (more or less) in the browser

<html>
<head>
<title>Mary Awesome's Streaming Assignment</title>
</head>

<body>

<h1>Mary Awesome's 421 Streaming Assignment Page</h1>

 

</body>
</html>

 Mary Awesome's Streaming Assignment

Mary Awesome's 421 Streaming Assignment Page
Filling in your assignment page

On the yellow front page of this site (or just below) click the example link, for the course assignment page you are working on. This is an example of how I want your assignment page for this course to look.

Example 421P Multimedia And New Media Streaming download media directly from this page
Example 422P New Media Writing For The Web  
Example 423P Digital Video And Web Video  
Example 424P Web Radio  

Feel free to look at the code by choosing "Viewing Source" either from the "View" menu, click "souce code" or right-click on the page and choose "View Source Code" from the pop-up menu. Copy and adapt. (To successfully adapt the code you need to understand it at least at a basic level.

For this you may need to download files, such as media files, which you can do by right-clicking links on the example page and choosing "Save Link As..." or "Download as..." (depending on browser). Then save the files to your "MyWebsite" folder or one of its sub-folders.

Third - Check your local files

Check to make sure your "site" is working on your computer before you upload it to the web. Do this by clicking or double-clicking on the "Default.htm" file, then clicking on the link (or links) in that file to make sure your assignment page (or pages) comes up. Click on any links in the assignment page to make sure they work. If it is good, time to upload your files. Once uploaded to the web they will truly be "Web" files on a "web" site.

Fourth - Place the Files on the Web Host

To make these HTML files web files they need to really be on the web, otherwise they are just HTML files on some local file system. They need to be placed on a host connected to the web. A host is essentially a landlord for your files. Kind of like renting retail space only in this case it is space on someone's hard drive. You provide the content and the landlord provides the location.

At UMKC it is UMKC itself which is your host. Everyone at UMKC automatically gets web space on the UMKC web server. Most people never know about and never use this web space, but you are going to. This is where you are to place your site.

Locate Your Files:
1 - Find your local files used to develop your site
2 - Find your Website Space at UMKC in which to copy those local files

Before you can do anything with your files you need to know
1) Where your files are located and
2) How to get to them to edit and upload.
The where and the how are directly affected by whether you are working from campus or from home/or/work.

Using FileZilla FTP Application - Simpler page showing how to use FileZilla for FTP file transfers

Once you have this figured out - transfer the files ( upload (copy to the web server location))

Fifth - Check the files you've just uploaded on the web

Check your website to make sure that it is working the way it worked on your local machine. If so, you are good. Remember, always use the world wide web url (the one which starts with the http:// protocol.

A Quick and Dirty Reference:

HTML tags for Content, Structure and Appearance

1 - You have been using content, structure and appearance as long as you have been reading and writing. You just haven't used these two terms and you probably didn't neatly divide the two terms into two different categories. They are so natural to you that you don't realize that you already understand the concepts.

2 - Content is the information (words, pictures) that you wish to convey.

3 - Structure is the way you arrange the information so that it is clear enough to make it easy to discern and understand.

  1. Your first writing tablet had a certain page size and it probably had lines on it. The lines and paper size are structure.
  2. You first words had spaces between them so you could discern the words. The spaces are structure.
  3. When you first learned to write paragraphs you learned to indent the first line. Indentation is structure.
  4. Some words you capitalized and some you didn't. Capitalization is appearance.
  5. Some words you made much larger on a separate line (headline). That is structure.
  6. You put periods at the end of sentences. Periods at the end of sentences are structure.
  7. To emphasize a word you might underline it or draw over to bolden it. That is appearance.
  8. Maybe you used parentheses, quote marks, apostrophes. Punctuation is structure.
In the table cells below the text from above is shown as content without structure. You will see it in two versions.
1 - No structure of any kind, not event the punctuation we normally see as a part of content in HTML.This is what we would have had no one ever separated words and sentences.
1youhavebeenusingcontentstructureandappearanceaslongasyouhavebeenreadingandwriting
youjusthaven'tusedthesetwotermsandyouprobablydidn'tneatlydividethetwotermsintotwodiffere
ntcategoriestheyaresonaturaltoyouthatyoudon'trealizethatyoualreadyunderstandtheconcept
s2contentistheinformationwordspicturesthatyouwishtoconvey3structureisthewayyouarrange
theinformationsothatitisclearenoughtomakeiteasytodiscernandunderstandyourfirstwritingtabl
ethadacertainpagesizeanditprobablyhadlinesonitthelinesandpapersizearestructureyoufirstw
ordshadspacesbetweenthemsoyoucoulddiscernthewordsthespacesarestructurewhenyoufirst
learnedtowriteparagraphsyoulearnedtoindentthefirstlineIndentationisstructuresomewordsyou
capitalizedandsomeyoudidntcapitalizationisappearancesomewordsyoumademuchlargeron
aseparatelineheadlinethatisstructureyouputperiodsattheendofsentencesperiodsattheendof
sentencesarestructuretoemphasizeawordyoumightunderlineitordrawovertoboldenitthatisappe
arancemaybeyouusedparenthesesquotemarksapostrophespunctuationisstructure
Actually, I had to cheat a bit to get all this text in the table cell above. The browser rules would have run the text to the right in a single line. That was a bit inconvenient so to confine the un-structured content to the narrow width I added line breaks.
 

2 - HTML content - No structural elements from HTML - no <p></p>, no <h1></h1>, <h2></h2>, ... <h6></h6>, etcetera, just content. In HTML, normal punctuation is not considered structure. Although this is much easer to read than our extreme example just above, you can see that using paragraph tags (above) is better by far.
1 - You have been using content, structure and appearance as long as you have been reading and writing. You just haven't used these two terms and you probably didn't neatly divide the two terms into two different categories. They are so natural to you that you don't realize that you already understand the concepts. 2 - Content is the information (words, pictures) that you wish to convey. 3 - Structure is the way you arrange the information so that it is clear enough to make it easy to discern and understand. Your first writing tablet had a certain page size and it probably had lines on it. The lines and paper size are structure. You first words had spaces between them so you could discern the words. The spaces are structure. When you first learned to write paragraphs you learned to indent the first line. Indentation is structure. Some words you capitalized and some you didn't. Capitalization is appearance. Some words you made much larger on a separate line (headline). That is structure. You put periods at the end of sentences. Periods at the end of sentences are structure.To emphasize a word you might underline it or draw over to bolden it. That is appearance. Maybe you used parentheses, quote marks, apostrophes. Punctuation is structure.
 

Structure adds physical arrangements which clarify meanings, from identifying words with spaces between them, to organizing thought topics with capital letters to start sentences and periods to end sentences and with blank-lines to separate text into paragraphs. Then there are smaller items such as apostrophes, or parentheses and so forth, to further organize and clarify intended meaning.

We can type out all the words we want but if we did not arrange those words physically in digestable packages (so to speak) it would become so dense and gray few of us would ever really read it.
cuneiform clay tablet
Cuneiform tablet showing content (the markings) and structure (the lines separating sections and the size and shape of the tablet itself. This tablet is probably 5,000 years old. So structure and content are very old concepts, long before HTML.

Structure and Content in HTML

In HTML we consider punctuation within a sentence, including spaces as as well as the actual text as content.

For HTML only those tags which arrange the location of items on a page, such as the body area, headings and paragraphs are considered structure.

  Page-Organizing
Structure		 Content-holding
Structure		 Content Descriptions
  <html>     Starts the document and tells the browser that this is an HTML document.
  <head>     The head tag creates a cataloging area for information about the page.
  <title></title>   title text This is the only header data which is visible.
1 - in the title bar (top border of window) and
2 - as the menu item when you save a link as a favorite (a bookmark).
  </head>     Closes out the header section
  <body>     The body tag creates the visible area on a web page. What you see is all shown within the body tags.
    <h1></h1> headline text Creates a heading on the page. There are six of these, h1, h2, h3, h4, h5, h6. The largest is h1 and the smallest is h6.
    <p></p> paragraph text Creates a paragraph as an area of solid text separated from other content with a blank line before and after.
  </body>     Closes out the body section
  </html>     Closes out the HTML document

The small number of tags in the table above are really all you need. You could even do without the heading tags except that you would then have to add in font sizing (appearance) tags anyway. The heading tags are specially relevant for search engines (such as Google) which use headings as special markers indicating sections of text and relative importance of areas of text.

There are three other structure tags you could add to "neat up" your document:

After that there are some simple appearance tags to pretty up your document:

I could easily add more tags and could complicate the issue with div and span tags and also styles. For the sake of "quick and dirty" we will leave it here. You should know that you can handle all or almost all of your purely text needs with this information. It is certainly enough for these assignment pages.