Sent pdf
Microsoft PowerPoint - first_four_23 CITC 1300 TEMPLATE & FIRST 4 TIME TO CREATE WEB PAGES I know that many of you are so very anxious to start creating web pages, but let’s take a small detour. Please allow me make some suggestions. Chapter 2 is the most important chapter in this entire semester because it starts building your HTML foundation. Because of its importance, I strongly recommend that you be sitting in front of your computer as you read the chapter. As they show coding, do the coding yourself. It will help cement what you read . Do you need web space on a server to see the web page(s) that you create working through chapter 2? No! You can view your work using the browser(s) installed on your computer – simply double-click on the filename and, as long as the extension is .html, the page will open in the default browser on your computer. Should you use Notepad? No! No! No! I strongly recommend that you download (https://notepad-plus-plus.org/) and install Notepad++. (MAC folks can use Text Wrangler/BBEdit/Brackets.) I also recommend that you also at least install the FireFox and Chrome browsers – you need to check your work on multiple browsers. Now, reread chapter 2 a couple of more times before tackling any assignments! Don’t forget Instructor’s Etc.! TEMPLATE You will be creating a lot of web pages this semester. The first page that you create will be a template. After you have successfully created this template, you will use it every time you start a new page. TEMPLATE (CONTINUED) Lines 17 – 19 will create the JavaScript timestamp that is required on every page that you create {another reason to start from the template}. Save the file as template.html and then open it in a browser {if using the recommended Notepad++, select Run and then Launch in Chrome or Launch in Firefox}. If you have typed the JavaScript correctly, you will see the current date and time at the top of your web page. If the browser page is blank, check your typing. Lines 4 – 6: They are comments and what is contained between the comment tags will not appear in your browser window. Lines 4, 5 & 6 are required on every page you create. Make sure to update the Assignment and Filename. Line 9: What you type between the TITLE tags will appear in the Title Bar or Navigation tab. No time to be cute here, give your page a meaningful title. Lines 9 – 12 are required on every page you create. Lines 15 – 32: Whatever you type between the BODY tags will appear in your browser window. The content of your page will vary, but all pages must have correctly functioning timestamp. FINALIZE TEMPLATE.HTML LARGER TEMPLATE FILE WHY A TEMPLATE FILE? Without the template file, you would have to type lines 1 – 33 every time you started a new web page, including the very persnickety case sensitive JavaScript. While I want you to understand what these lines of coding do, I also want you focused on the chapter material. So, when you are ready to create your home page, for example, open the template.html file in the text editor that you are using (remember, using web authoring software is against course rules). Before you do anything else, File -> Save As, and then type in index.html. This way you are certain that a correctly functioning JavaScript timestamp will be at the top of your page, as required. You will be creating a lot of web pages this semester, so please remember to take advantage of the template file you made. SAMPLE TEMPLATE CODE Look at the first 13 lines of a template. As you use this file to create all of the course files in 1300, you would only have to alter the contents of lines 5 (the assignment),6 (the name of the file), and 9 (the title of the web page). This information must be changed for every file or points will be deducted (up to 5 points per error). Remember, your boss is persnickety and wants to know exactly who to yell at, or fire, if a file representing her company was done poorly. FIRST 4 PAGES The first four pages, also referred to as “portal” pages, must be completed and uploaded to the web server folder that is named your A# before you can move forward in this course (look on the course schedule for the due date). Your links must work properly so that I have access to your assignment files for grading. It is your responsibility to make sure all links on the file that you uploaded to the server work properly. index.html basic.html casestudy.html challenge.html FIRST PAGE Your first of your four “portal” pages that you will create is your index.html page, commonly referred to as your “home page”. The top left corner will display the required JavaScript timestamp. The next line will display your name, followed by this course’s rubric and then the name of our school and a horizontal rule
. {Refer to page 648 which is a part of the alphabetical elements in Appendix A.} Below the horizontal rule you will see an unordered list with hyperlinks to the Basic, Case Study, and Challenge pages. On the right side of the page is the current semester information and a link to your frequently checked external (not D2L) email address. INDEX.HTML (CONTINUED) The timestamp, your name, course rubric, school name and unordered list are left aligned, which is the default placement. The code between the JavaScript Last Modified information and the horizontal rule should be inside the header element. For the right aligned semester information … if it is Summer 2024, display Semester 24M; for Spring 2025 display Semester 25S; and, if it is Fall 2022 display Semester 22F. Please note that there is no empty line between the semester and email lines, yet they are on separate lines. It’s your job to figure out how to do this! Save your index.html file. Don’t forget to correct the commented information and to add an appropriate, informative title to your page. INDEX.HTML (CODE) Notice the slight changes from index.html (this page can also be seen in the Site Map document) : Basic Assignments has replaced Nashville State Community College This “portal” page will provide links for your instructor to easily access assignments not related to a case study or challenge Notice the page title text and navigation at the bottom of the page Hint: After saving your home page (index.html), making sure that your email link on index.html works, and everything else is in the correct place, do a File -> Save As and rename index.html to basic.html. Then, make the “slight changes” referred to in the fancy bullet list. Don’t forget to change the comments at the top of your code page. Also, check your spelling or lose points. BASIC.HTML CASESTUDY.HTML Please notice that the screen shot is not showing the right side of the page or the text navigation because both are the same as index.html and basic.html. Since you will be doing a File -> Save As, that information should remain on your portal pages. Notice the slight changes from the index.html page: Case Study Assignments has replaced Nashville State Community College The links on this page are now for each chapters’ case study assignments. Each chapter’s case study files should be in separate folders on the server, (refer to Site Map) so don’t attempt these links until you have read section 10.3 in Chapter 10 CHALLENGE.HTML Notice the slight changes from the index.html page: Challenge Assignments has replaced the name of the school The links on this page are now for each chapters’ challenge assignment. The HTML files for the challenge assignments should only be located in the challenge folder – refer to the Site Map. SUMMARY • You will create a template.html file that you will use to start every web page that you create for this course. • You will create an index.html file that will serve as your home page providing access to your Basic, Case Study, and Challenge portal pages. • You will create basic.html that will provide links to all pages that are not case study or challenge assignments. • You will create casestudy.html to provide links to the files in the chapter folders that contain the web case study assignments. • You will create challenge.html to provide links to all of the challenge assignments and they should all be located in the challenge folder. • You will follow the file and folder naming conventions displayed on slide 8 WEB SERVER SITE MAP *The handson folder is completely optional but if you want to upload your Hands-On Practice work from the textbook, this is the place. This work will neither be looked at by the instructor nor graded. This is the structure of the site map that you are required to create and use correctly throughout the semester. Don’t just consider this to be a “suggestion” of where you should upload files. You will lose points if you place your work in the wrong location. Place the files where your “boss” has instructed. Make sure you’ve read the Site Map document located in the Web Basics module before attempting to upload your files. In addition, download the free ftp program and read Appendix F FTP Tutorial. Visio-sitemap23S.vsdx 1300 Site Map ww6.nscc.edu/student/A######## case csschallenge jsimageshandson*basic A######## *The handson folder is completely optional but if you want to upload your Hands-On Practice work from the textbook, this is the place. This work will neither be looked at by the instructor nor graded. chp2 chp3 chp4 chp8 A######## Files located in the root folder: index.html {this is your home page} If you have not done so already, don’t forget to delete the index.htm file before you test your home page. Root Folder ww6.nscc.edu/student/A########/index.html Hyperlinks on your home page to assignment portal files located in subdirectories: basic.html casestudy.html challenge.html The email hyperlink should use your most frequently checked external (not your D2L) email address. Basic Folder ww6.nscc.edu/student/A########/basic/basic.html basic The web pages that you create for the “basic” assignments should all be uploaded to the “basic” folder. A######## css jsimages All additional external cascading stylesheets, images and external JavaScript files should be in these folders. There is an exception for the casestudy files. {Remember to check section 10.3, File Organization (pg 480) if you need help with paths.} Clicking on this Basic link should open this page Basic Folder ww6.nscc.edu/student/A########/basic/basic.html This is a partial screenshot of what your basic.html portal page should resemble. Please notice the text navigation in the footer of each page, and the descriptive page title. Case Folder ww6.nscc.edu/student/A########/case/casestudy.html case The web pages that you create for the “case” assignments, and any supplemental files such as images or css files, should be uploaded to the “case” subdirectories that are displayed below. Remember, as mentioned elsewhere in the class, no spaces in folder or file names! A######## chp2 chp3 chp4 chp8 Case studies will be handled slightly differently. Despite what the textbook indicates, do not use index.html for the case study homepage. If you accidently upload your case study homepage to your root directory, it will overwrite your home page. Your boss requires that you use the following filenames for the various case studies: Java Jam -> jjindex.html Fish Creek -> fcindex.html Pacific Trails -> ptindex.html Yoga Studio -> ysindex.html If you aren’t certain which case is used in your class, go to the bottom of the D2L home page for 1300, and look in the Course Progression News item. Subdirectories Clicking on this Case Study link should open this page Case Folder ww6.nscc.edu/student/A########/case/casestudy.html This is a screenshot of what your casestudy.html portal page would resemble if you had been assigned the Yoga Studio case. Challenge Folder ww6.nscc.edu/student/A########/challenge/challenge.html challenge The web pages that you create for the “challenge” assignments should be uploaded to the “challenge” folder. A######## css jsimages All images, external cascading style sheets and external JavaScript files should be in these folders. {Remember to check section 10.3, File Organization (pg 480) if you need help with paths.} Clicking on this Challenge link should open this page Challenge Folder ww6.nscc.edu/student/A########/challenge/challenge.html This is a screenshot of what your challenge.html portal page should resemble.