Pre-Assignments ITSE 1411--Beginning Web Programming

Design Text, Chapter 1, Pages 1 - 6 Introduction)
Design Text, Chapter 2, Pages 7 - 19 (Overview)

If you do not understand the assignment, just ask for further explanation or see a tutor Tutoring schedule. If no tutor is available, you should be able to get help with uploading a file from a lab tech at an ACC computer department lab. The lab techs are not tutors and their help will be limited.
If you find broken links, please email me immediately so that I can fix them.
You will be creating web pages and uploading them to your website.
- You will view your pages in a web browser. The popular web browsers are Internet Explorer 8.0 and Mozilla Firefox.
- Download the latest versions if they are not already installed on your computer. You can have multiple browsers installed on your computer (provided that you have the space). You are not restricted to using just one. If you are a Mac user, I recommend that you use Safari.
You will create pages using a software package called an editor.
- The textbook recommends that you use Notepad. I do not recommend using Notepad. It is difficult to find your errors and it offers you no assistance for necessary syntax.
- This course emphasizes XHTML and JavaScript; therefore, I do not want you to use software packages that do the work for you such as FrontPage or DreamWeaver.
- For PC users I recommend the Less Than Slash Editor because it is free and checks for compliant XHTML code. Please give it a try.
- Mac users try the recommendations listed on my Mac users site.
The Less Than Slash editor has an option for completing your tag as you type.
- This option aggravates some students.
- If it aggravates you, turn off the option by going to Tools, Syntax, Autocomplete Enabled.
PC users please download the Less Than Slash editor now.
For this pre-assignment you are copying, editing, saving, and uploading two pages.
If you do not have experience with placing files inside of folders, here is an explanation written by Sharon Joiner to help you understand file hierarchy.

Learn your editor (LTS for PC users).
- Open your editor.
- Click File, New Page
- Notice the tabs on the right.
  - HTML Source -- your edit mode.
  - Preview -- allows you to view your page as it looks in Internet Explorer.
  - Reference -- shows your validation results.
- Notice the tools tab on the top.
  - The W3 Validate link only works when you are connected to the Internet. The LTS editor sends a default meta tag with the content. You still need to include your meta tag showing the content on every page that you create. (The meta tag is explained later.)
  - The Insert DTD will insert the selected DOCTYPE. FYI--You cannot highlight a line of code and press the Insert DTD and have it replace the highlighted line.
  - The Syntax link, Autocomplete Enabled is a toggle to allow you to select the Autocomplete Enabled feature.
Mac users, select an editor and practice using it. I don't know of an editor using the Mac that directly links to the W3C validation program. So, you must also learn to validate your pages. Check out my validator links.

Create a folder on your hard drive or flash drive named public_html.

The first page of your assignment is to copy and save an html page that you will name index.htm. You will modify this page the rest of the semester.
- The spelling must match EXACTLY.
- Start page names with a lowercase letter and use an htm extension.
- The book may name pages starting with uppercase letters and an html extension. If you change your pages to be uppercase or use .html as your extension the index page I give you will not link correctly. After the linking assignment you should be able to make changes and use whatever extension you choose. However, do not use spaces in the names. This causes problems on some servers. Just don't get in that habit.

Open this page:

sampleindex
Here is a step-by-step tutorial showing screen shots using Safari on a PC. It should be the same in any browser just a different browser look, the steps are the same.
In your browser, while viewing the sampleindex.htm page, right click anywhere on the page and view the source. DO NOT click 'File, Save As' in your browser while viewing the actual page!
Save the viewed source as index.htm in your public_html folder.
Close the viewed source page.
Invoke your Less Than Slash editor (Mac users, you must follow the steps necessary for your editor.)
Open your index.htm page in LTS.
Click on Edit > Replace on your Menu Bar
In the Text to Find box enter: Your Name
In the Replace with box enter: your actual name
There should be 2 replacements made
Save your page.
Click on Tools > W3 validate on your Menu Bar
Your page should show that there are no errors

The second page of your assignment is to copy and save an html page that you will name template.htm. This page will serve as the start (template) when creating an html page.
- Open this page:
  
  template
- Right click anywhere on the page and view the source.
- Save the viewed source as template.htm in your public_html folder.
- Close the viewed source page.
- Invoke your Less Than Slash editor (unless it is already open).
- Open your template.htm page.
- Click on Edit > Replace on your Menu Bar
- In the Text to Find box enter: Your Name
- In the Replace with box enter: your actual name
- Save your page.
- Click on Tools > W3 validate on your Menu Bar
- Your page should show that there are no errors

You now need to upload your index page and your template to your web site.
Be sure that you upload into the folder named public_html. On the server, you may see additional files in that folder. Those allow for the password protection. Just leave them there. If you accidentally delete them, let me know and they will be reinstated.
- Uploading uses a file transfer program.
- Click on the How to Post link for further instructions.
- Also, visit the software link to download and install the file transfer programs.
- Following one of the sets of instructions for file transfer, upload your pages to your web site.
- Your login and password are posted in Blackboard.

The LTS editor does not catch everything. It also does not have a link to validate CSS. In only links to the W3C to validate your HTML.
Go to your website:

http://cois-linux.austincc.edu/~loginName
Substitute your actual login name for loginName
You should see the index.html page that you just created.
If you do not see your page, you did not upload correctly.
- Go back to SSH (your file transfer program).
- Log in again.
- Check the right hand column (Remote Name) and double click on public_html
- You should see index.htm and template.htm
- If you see another folder named public_html you just incorrectly created a folder inside of a folder.
- If you need to delete this second public_html folder follow these steps.
  - You cannot just delete the folder. It must be empty to delete it.
  - Double click on this second public_html folder.
  - Delete any files inside of this second public_html folder.
  - In the bar above Remote Name click on the folder with an up arrow.
  - Now you can delete the second public_html folder.
  - Upload your index.htm and template.htm pages from your files found under Local Name.
  - Do not upload public_html. Upload the index.htm and template.htm pages only.
  - Go back to your browser and see if you see your index.htm page.
  - If you do not see it, then you did not name your page index.htm with all lowercase letters.
  - Go back and rename your file to index.htm
  - If you cannot see your page you need to go to an ACC computer department lab for help with file management. http://www.austincc.edu/cit/labHrs.html
Look at the address bar on your index page. Is your name in the title? (Your actual name, not the words Your Name.) If it is not, you need to go back to creating your index page, make the correction, reupload, and make sure that you have made this correction.
Look at the top of the page. Is your name followed by ITSE 1411 Assignments shown? (Your actual name, not the words Your Name.) If you do not, you need to go back to creating your index page, make the correction, reupload, and make sure that you have made this correction.
Click on the XHTML image. It will link to the W3C HTML validation service. You should see a message that your page validated successfully.
Click on the CSS image. It will link to the W3C CSS validation service. You should see a message that your page validated successfully.
On your index.htm page you will see two links that say template. The first one is lowercase and is an in page link that will adjust the page to the location of your Template link if your screen is too small to show the entire page.
Click on the link named Template using an uppercase T. This should link you to your template.htm page.
If you do not see your template.htm page, you did not upload correctly or did not name your page correctly.
- You will need to make the proper correction until your index page properly links to your template.htm page.
Your template.htm page should show your name in the title bar and an HTML image and a CSS image.
Test to make sure these validate.

Email me to look at your site. It is not graded but it is essential that you can follow these steps so that you can complete your graded assignments and projects correctly.