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
uilding 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
owser(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
owser 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
Wrangle
BBEdit/Brackets.) I also recommend that you also at least install the
FireFox and Chrome
owsers – you need to check your work on multiple
owsers.
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
equired 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
owser {if using the recommended
Notepad++, select Run and then Launch in Chrome or Launch
in Firefox}. If you have typed the JavaScript co
ectly, you will
see the cu
ent date and time at the top of your web page. If
the
owser 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
owser 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
owser window. The content of your page will vary, but all pages must have
co
ectly 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 co
ectly
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 e
or). 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 refe
ed 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 refe
ed 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 ru
ic
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 cu
ent semester information and
a link to your frequently checked external (not D2L) email address.
INDEX.HTML
(CONTINUED)
The timestamp, your name, course ru
ic, 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 co
ect 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 co
ect place, do a File -> Save As and rename index.html to
asic.html. Then, make the “slight changes” refe
ed 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 –
efer 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 co
ectly
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
efore you test your home page.
Root Folde
ww6.nscc.edu/student/A########/index.html
Hyperlinks on your home page to assignment
portal files located in subdirectories:
asic.html
casestudy.html
challenge.html
The email hyperlink should use your most
frequently checked external (not your D2L)
email address.
Basic Folde
ww6.nscc.edu/student/A########
asic
asic.html
asic
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 Folde
ww6.nscc.edu/student/A########
asic
asic.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 Folde
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
oot 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 Folde
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 Folde
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 Folde
ww6.nscc.edu/student/A########/challenge/challenge.html
This is a screenshot of what your challenge.html portal page should resemble.