Project 1 - Web Tools & Coding Terms


Links for lecture notes are "clickable" when viewing the project instructions online from the class web page. Reading the lecture notes required for completing the lab activity and online quizzes:


With today's online resources and HTML editing programs, it has become much easier to put together a web page.  You don't have to know anything about web tools if you simply know how to follow instructions!  However, if you plan to develop well-designed websites that are easily navigated, maintained and updated, you need to know as much about the principles involved in website creation as possible.  During this semester, you will have an opportunity to learn much more than just the technical aspects of creating a web page. You will gain valuable background information, terminology and principles that will dramatically improve your ability to create well-designed websites that are functional, accessible and search engine friendly.

HTML 5 is the most current version of HTML coding. Take advantage of a fully developed html5 validator (code checker). Following the HTML5 coding rules will help you develop habits for clean coding and help you prepare to learn strict rules for other web coding languages like java script.

Last semester, the average amount of time that students reported they spent on projects was about 3-4 hours per project. The amount of time will depend on many factors, including your previous knowledge and experience, your learning style, the speed of the Internet connection you will be using, your desire to learn new concepts, and your ability to read and follow written instructions.


FILE MANAGEMENT

Creating websites requires confidence in using folders to store files. The location of a file is referred to as the "path."

Folders used to store files may also be referred to as directories or as subdirectories.

If you are weak in file management skills, read the Lecture Notes for File Management before taking the quiz for this project. (You must be online to access the links for the lecture notes. See list of links at the top of the project instructions.)

When asked to give the "path" for files stored on a Windows system, you should name the drive letter, folders and filenames using backslashes to separate.
When referring to the path while files are stored on a local computer, the slashes are always backslashes ( \ ).

Understanding how files are stored on a computer helps you understand how to determine the correct URL for pages that you publish to the Internet. Pages are stored on the Internet in the same way as they are stored on a local machine.

Example:
A file named cis152.html that is stored in a folder named named parkland on the D:\ drive of my machine, would have a path that looks like this when stored in a Windows environment:
D:\parkland\cis152.html

The same file stored in a folder named "parkland" that has been published to the CSIT Parkland Internet server will have a URL that looks like this:
http://www.csit.parkland.edu/~login#/parkland/cis152.html

Looking at the above example, notice the similarities and differences between the "path" on local storage and the "URL" for the same file stored on the Internet.

Mac Users: Files are stored in the same way on a Mac. Finder on a Mac is similar to Windows Explorer. Finder can be used for file management tasks on a Mac. You can see the "path" to files on a Mac by changing one of the default settings. With a Finder window open, select "Show Path Bar" from the View menu. It will then display a path at the bottom of the Finder window.


RULES FOR NAMING FILES AND FOLDERS

There are some strict rules to follow when naming files to be used with websites. These rules should be followed for every web page you create this semester!


URLs

The more confidence you have with file management concepts, the easier it will be to manipulate code to find files that you are using in your website. File management concepts also apply to how files are stored on a server. URLs are created based on the "path" to the files on a server.

NOTE: Although the .htm or.html at the end of a filename is technically referred to as the "extension," when asked for "filenames" in this course, you should include both the filename and the extension used with it. For example, the "filename" for the URL of http://www.parkland.edu/instructions.html would be given as "instructions.html" not just "instructions." In URLs, there will be one Host(domain) name and one filename, but there may be multiple folders depending on the folder structure established for the website. You can have folders inside folders, as seen in the sample URL given below.

To help you understand how a URL is created, visit the following website:

http://www.internet4classrooms.com/entry_level_pc_ie_url.htm

To name each part of the following URL:
http://www.parkland.edu/athletics/baseball/schedule.aspx

protocol: http://
domain: www.parkland.edu
directories/folders: athletics, baseball
filename: schedule.aspx

 

Project 1: LAB Activity

Open Windows Explorer (right-click on the Start button and Open Windows Explorer). With Windows Explorer open, find the storage location that you plan to use (hard drive, desktop, USB drive) and open it. In the right pane of Windows Explorer, right-click on a blank space and choose New >> Folder from the pop-up menus. Name the folder, (using all lowercase, no spaces): webcoding. (Mac users should follow standard procedures for creating a new folder named webcoding.)

Open your text editing program (Notepad or TextWrangler). Save the new document into the webcoding folder. Name the file, (using all lowercase with no spaces): project1.html

If Notepad is stubborn about allowing you to add the .html as the final extension for the filename, put the filename and extension in quotes in the save in text box like this: "project1.html"

In chapter 2 of the optional text, it says to Select UTF-8 from the Encoding drop-down list when you are saving your file in Notepad. Windows users should NOT do this. It will create a problem in validation later. The default setting for encoding is ANSI. You want to keep the default while using Notepad in this course. (Mac users can leave the setting for UTF-8)

Mac Users

If you plan to open your Mac-created files in a Windows environment on campus, it is important to take extra steps to make your coding open appropriately in Windows. Using Text Wrangler as your text editor, open the Text Wrangler menu >> Choose Preferences >> Text Files >> Translate Line Breaks >> Windows (CRLF). When you are executing the Save command, you can also double check to be sure that the option for Line Breaks is set to Windows.

Create a web page

The text content (with no coding included) for the web page for this project is available to copy and paste from a text file online at:

http://www.csit.parkland.edu/~ddallas/cis152/webdesign/projects/project1.txt

While viewing the text content online, select all of the text, choose the copy command, open the file you have created named project1.html in your text editor and paste the content into the page.

Add coding to the page:

It must include all of the necessary code to be a valid html5 document. The coding should start with a DocType statement. (See Lecture Notes for HTML5)

All <code> after the DocType statement must be lowercase.

Copy and paste coding from the "HTML5" lecture notes as much as possible to ensure consistency.

The <head> section of the page must include the <meta> tags and the <title> tag. For the content of the <title> element, you should use text that describes the content on the page. The title content should be something that tells the user what to expect to see on the page. It is often the same text that you see in the first heading on the page or something similar to that. For this project, you should use "Web Career Information" as the title content and add your first and last name. It will look something like this:
<title>Web Career Information - Your Name</title>

After closing the <head> section of coding with the </head> tag, start the <body> section.

The elements in the <body> section should include coding for:

Do NOT use a level 3 heading for the third heading. The "Web Developers" heading has the same level of importance in the text as the "Web Designer" heading. The "level" of the heading indicates its importance, not its position in the document. "Web Designer" and "Web Developers" are both level 2 headings that are subheadings for the main heading "Web Career Information"

Be sure to close the body section with the </body> tag. After the ending </body> tag, close the web page with the </html> tag.

This screenshot is not provided for you to type the text from. (It is intentionally small and slightly blurred.) You should download the text for this content. See link given earlier in these instructions. If you attempt to type this content rather than downloading the provided text, any typographical, spelling or grammar errors that you have will cause points to be deducted from your score.

project 1 text

The purpose of the first project is not to create a beautiful web page; it is to demonstrate that you understand valid coding for HTML and how to use the "web tools" to create, edit and publish a page. If your page does not pass the validation check by the W3C validator for HTML5 coding, you will have 10 points deducted from your project score. Why? Your project is considered incomplete if it does not pass validation. Use the lecture notes for HTML5 to determine what codes must be included and where the codes belong. Coding must be perfect and in the proper order to pass validation. Read the lecture notes about the validator to help you learn how to use it effectively and efficiently to "Code-Check" your code.

While working on projects, if you have errors reported by the validator that you do not understand, you can ask questions about that. Upload your web page to the server. Send me the URL of your page so I can view it and tell me what the FIRST error is from the validator. Errors should be corrected and revalidated one at a time because often the correction of one error resolves many other issues listed by the validator.


Upload your webcoding folder to the Parkland CSIT server

You will be publishing your web pages to the Parkland CSIT server using an SFTP program. I recommend using WinScp (for Windows) to upload. It is a free program that can also be downloaded to your home computer. (See lecture notes about uploading for more details - Mac Users need to use Cyberduck or other SFTP program of your choice.)

Viewing your Files after Uploading with WinScp

Do NOT use the WinScp window to  try to view your pages as PUBLIC web pages. You cannot open files in the WinScp window to "preview" your files as PUBLIC web pages.  The "path" that you see at the top of the WINScp window is NOT your public URL. Do NOT consider something that looks like this to be your public URL.
file:///C:/Users/admin.000/AppData/Local/Temp/scp42495/webcoding/project1.html

This will never be part of your public URL:
mnt/shaula/students/x/xlogin1/public_html/index.html

When you use the "Open" command inside the WinScp program, your files open in Code View or inside the WINScp window but not with a PUBLIC URL.
To see the PUBLIC view of your files after uploading them, DO NOT USE WINSCP to "open" your file.
You will NOT see the accurate view of your page.

After you upload your files, it is important to LEAVE the WinScp window.
To properly view your published pages, open a browser window: Internet Explorer/Firefox/Chrome/Safari.
Type the URL for your page in the address bar and ENTER.
This should give you a PUBLIC view of your published web page.

If you are weak in this area, you must get help! Email me or make an appointment to meet with me on campus.


All of the URLs that you will have for your web pages for this course that are stored on the Parkland server will begin with:
http://www.csit.parkland.edu/~yourlogin#/
(substituting your user name and number where it says yourlogin#)

Storing documents on the Internet requires a unique URL for each page to describe its location. Slashes divide the different parts of the URL to indicate where the file is stored on the Internet.
http:// represents the protocol
www.csit.parkland.edu represents the server (similar to a drive or storage device)
~yourlogin# represents a folder that is reserved for your webspace on the server

You add the folder and filename to the end of the URL separating folders and filenames with a slash.
The URL for the file you create with this project should be similar to:
http://www.csit.parkland.edu/~yourlogin#/webcoding/project1.html

When required to send URLs for the pages that you create, be sure that each URL starts on a new line and includes the entire URL starting with the http:// and ending with the filename.html

Make sure the URLs that are sent will work! Sending URLs that don't work will result in loss of points. If you do not send a working URL by the deadline for the project, you will not receive full credit for the web page that could not be viewed.


Submit Project

Lab:

Use the Drop Box in Cobra to submit your URL for your published web page. The best way to be sure that you are submitting an accurate URL is to view your page in a browser after publishing it to the CSIT server. When your page is viewing as a published web page, the URL will be in the address bar of the browser window. Copy and paste the URL from the address bar to the "Comments" area of the drop box that you are using. Use the instructions given with the Dropbox to be sure your URL is submitted properly. When you paste your URL into the URL textbox of the Insert Quicklink dialog box, it may duplicate the http text at the beginning of the URL. After you have pasted your URL into the textbox, be sure to view the beginning of the URL to be sure there is only one http:// included.

When using Cobra drop boxes, you must also send a file. Please send the Notepad file of your code as an attachment in the Drop Box.

The URL will be used to view your published web page for grading. You will lose points for not uploading your web page properly or sending a URL that does not open your page. If you are having difficulty with the uploading procedure, you must make an appointment or stop by office hours to get help.

Quiz:

Take the quiz using your Cobra account for this course. You will have 60 minutes to take the quiz. It is open book/notes. You are allowed one attempt to take the quiz. Your time starts as soon as the quiz loads. You cannot save your answers and return to take the remainder of the quiz at a later time. Once the quiz starts, you must submit all of your answers before leaving the Cobra environment. You may retake quizzes to improve your grade. there are no limits to how many retakes you can have.

The first two questions on Quiz 1 are based on an image that displays a file management window. Be sure that you allow extra time for the quiz to display the picture before you try to answer the first two questions. It could take a long time (about a minute) to load the picture. Be patient.

The full results of the quiz, including your score and corrected answers will be available to view after all quizzes have been graded by the instructor. This may be a few days after the deadline expires for the quiz.


Reminder: Late projects will receive no points. Feedback for late projects can be obtained by making an appointment video chat, google + hangout, with the instructor during office hours.