| Server IP : 134.29.175.74 / Your IP : 216.73.216.160 Web Server : nginx/1.10.2 System : Windows NT CST-WEBSERVER 10.0 build 19045 (Windows 10) i586 User : Administrator ( 0) PHP Version : 7.1.0 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : OFF | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : C:/Users/Administrator/AppData/Local/Google/Chrome/User Data/Default/Cache/Cache_Data/ |
Upload File : |
<!DOCTYPE html>
<html lang="en">
<head>
<title>Computer Systems Technology - CST1021 HTML and CSS - Lab 3 - Links - Jim Martinson - 2022 Fall Semester (20233)</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="/css/CST.css" rel="stylesheet" type="text/css">
<link href="/css/debug.css" rel="stylesheet" type="text/css">
<link href="/css/tooltip.css" rel="stylesheet" type="text/css">
<link href="/css/colorCode.css" rel="stylesheet" type="text/css">
<script src="/js/CST.js"></script>
<script src="/js/div.js"></script>
<script src="/js/CollapsibleLists.js"></script>
<script src="/js/debug.js"></script>
<script src="/js/tooltip.js"></script>
</head>
<body>
<!-- Begin section 1 -->
<br>
<table id="tbl_1" class="sectionTable nopad center" style="width:1000px;" >
<tr>
<td class="blackBorderLeft"></td>
<td id="td_1" class="sectionTd blackHeading" style="width:978px;">
<div style="position:relative;">
<div style="padding-top:3px;">Computer Systems Technology - Ridgewater College</div><div style="position:absolute; right:0; top:0; text-align:right; width:100%;"><div style="padding-top:2px;"><a href="/admin/">admin</a> <a href="?Logout">Logout</a></div></div> </div>
</td>
<td class="urcA"><div class="urcA"></div></td>
<td class="urcB"><div class="urcB"></div></td>
</tr>
<tr>
<td class="whiteBorder"></td>
<td id="td2_1" class="contentTd white" colspan="2" style="width:996px;">
<table class="nopad">
<tr>
<td class="pageImage" rowspan="2"><a href="/"><img src="/images/CSTlogoBlue115.gif" alt="Blue CST logo" /></a></td>
<td class="pageName" colspan="3">2022 Fall Semester (20233)<br>CST1021 HTML and CSS<br>Lab 3 - Links</td>
<td class="pageImage" rowspan="2"><a href="/"><img src="/images/CSTlogoGreen115.gif" alt="Green CST logo" /></a></td>
</tr>
<tr style="height:25px;">
<td style="width:70px;"></td>
<td class="center" style="width:688px;">
<a href="/">Home</a> | <a href="?Logout">Logout</a><br>
<table class="center">
<tr>
<td>
<a href="/JimMartinson/CST1021/" title="CST1021 class homepage.">CST1021 Home</a> | <a href="/JimMartinson/CST1021/?Assignments">Assignments</a> | <a href="/JimMartinson/CST1021/Resources/" title="CST1021 Resources.">Resources</a> | <a href="/JimMartinson/CST1021/Schedule/" title="CST1021 Schedule.">Schedule</a> | <a href="/JimMartinson/CST1021/Syllabus/" title="CST1021 Syllabus.">Syllabus</a> </td>
</tr>
</table>
<table class="center"><tr><td>
<a href="/JimMartinson/CST1021/?ClassRoster" title="CST1021 Class Roster.">Class Roster</a>
| <a href="/JimMartinson/CST1021/?Gradebook" title="CST1021 Gradebook.">Gradebook</a>
</td></tr></table>
</td>
<td class="right" style="width:70px;"></td>
</tr>
</table>
</td>
<td class="blackBorderRight"></td>
</tr>
</table>
<!-- End section 1 -->
<!-- Begin section 2 -->
<br>
<table id="tbl_2" class="sectionTable nopad center" style="width:1000px;" >
<tr>
<td class="blackBorderLeft"></td>
<td id="td_2" class="sectionTd blackHeading" style="width:978px;">
<div style="position:relative;">
<div style="padding-top:3px; margin:0 250px; white-space:nowrap;">Computer Systems Technology - Ridgewater College</div><div style="position:absolute; left:2px; top:0px;">
<form name="form_SelectSession" class="inline" action="/JimMartinson/CST1021/Labs/Lab03/" method="post">
<input type="hidden" name="f_form" value="form_SelectSession" />
<input type="hidden" name="f_uuid" value="c704d1097893344a105a1d13d58b8ba5" />
<input type="hidden" name="f_task" value="Change session" />
<select name="f_sessionId" id="f_sessionId" onchange="this.form.submit();">
<option value="303">2023 Spring Semester (20235)</option>
<option value="302" selected>2022 Fall Semester (20233) (current)</option>
<option value="301">2022 Spring Semester (20225)</option>
<option value="300">2021 Fall Semester (20223)</option>
<option value="283">2021 Spring Semester (20215)</option>
<option value="282">2020 Fall Semester (20213)</option>
<option value="46">2020 Summer Session (20211)</option>
<option value="281">2020 Spring Semester (20205)</option>
<option value="280">2019 Fall Semester (20203)</option>
<option value="45">2019 Summer Session (20201)</option>
<option value="44">2019 Spring Semester (20195)</option>
<option value="43">2018 Fall Semester (20193)</option>
<option value="42">2018 Summer Session (20191)</option>
<option value="41">2018 Spring Semester (20185)</option>
<option value="40">2017 Fall Semester (20183)</option>
</select>
</form>
</div> </div>
</td>
<td class="urcA"><div class="urcA"></div></td>
<td class="urcB"><div class="urcB"></div></td>
</tr>
<tr>
<td class="whiteBorder"></td>
<td id="td2_2" class="contentTd white" colspan="2" style="width:996px;">
<br>
<form name="form_CST1021_Lab03" action="/JimMartinson/CST1021/Labs/Lab03/" id="formAssignment" onSubmit="return checkFileUpload(this);" method="post" enctype="multipart/form-data">
<input name="f_form" type="hidden" value="form_CST1021_Lab03">
<input name="f_task" type="hidden" value="Submit">
<input name="f_uuid" type="hidden" value="d773edfc4e9279890075c85d0bfa5ea5">
<input name="f_evaluationNumber" type="hidden" value="3">
<input name="f_classId" type="hidden" value="1253">
<input name="f_classNumber" type="hidden" value="CST1021">
<input name="f_classSection" type="hidden" value="41">
<input name="f_courseNumber" type="hidden" value="CST1021">
<input name="f_evaluationId" type="hidden" value="2850">
<input name="f_evaluationName" type="hidden" value="Lab03">
<input name="f_evaluationTitle" type="hidden" value="Links">
<input name="f_evaluationType" type="hidden" value="Lab">
<input name="f_userFullName" type="hidden" value="Jim Martinson">
<input name="f_userId" type="hidden" value="1">
<input name="f_userStudentId" type="hidden" value="00007967">
<input name="HTTP_REFERER" type="hidden" value="https://cst.ridgewater.edu/JimMartinson/CST1021/?Assignments">
<input name="MAX_FILE_SIZE" type="hidden" value="100000000" />
<fieldset><legend>Description</legend>
The purpose of this lab is to demonstrate your ability to use links on a web page.
<br>
This lab will require you to make two web pages.
<br>
<span class="note normal">
You may add minimal tags (<span class="highELE">br</span>, <span class="highELE">p</span>, <span class="highELE">span</span>, etc...) as you see fit to create these pages.
<br>
This lab has a lot of steps, some of them are complex. Be sure to test your pages to ensure the links work as required.
</span>
<br>
<span class="warning">
WARNING! You must use <b>Firefox</b> for the shortcuts to work properly (Using alt-shift-letter).
The Chrome browser (And Edge, since it is based on Chrome now) has broken some shortcut letters. e.g. alt-shift-b now works as alt-b and alt-shift-t now works as alt-t.
<br>You can find out more about accesskey support at <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey">MDN Web Docs - accesskey</a>.
</span>
<br>My appologies for not putting this lab online on Wednesday -- Jim.
<div><b class="evalOverdue">This Lab is overdue. It was due on Wednesday, September 28<sup>th</sup>, 2022 before 1:00 pm (9 weeks ago).</b></div><div><span class="evalNS">You have not submitted Lab 3.</span></div><div class="hp note">
I have added a capability to assignment pages:
You can now <b>check-off</b> the steps by clicking on the step numbers.
<br>This is not persistant. If you reload the page all steps begin as un-checked again.
</div></fieldset>
<fieldset><legend>Lab Instruction</legend>
<ol id="main" class="count">
<!-- Step 1 -->
<li>Create a folder for this lab named <b class="copyText">Lab03</b> and keep all documents used for Lab 3 in that folder.</li>
<!-- Step 2 -->
<li class="css">Download <b><a href="Lab03.css" onMouseOver="ttShow('Click to download.')" onMouseOut="ttHide();">Lab03.css</a></b> and save it in your <b>Lab03</b> folder.</li>
<!-- Step 3 -->
<li class="pageA">Create a web page.
<br><span class="note normal">Any needed css may be inline, internal, or external.</span>
<ol>
<li>Name the file <b class="copyText">JimMartinson_Lab03_A.html</b>.</li>
<li>The page must contain the foundation tags. <a href="#notes" class="smaller">See notes</a></li>
</ol>
</li>
<!-- Step 4 -->
<li class="pageA">Place the following in the <span class="highELE">head</span> of your page: <a href="#notes" class="smaller">See notes</a>
<ol type="a">
<li>Title the page <span-content class="copyText">Lab 3 - Jim Martinson - Page A</span-content>.</li>
<li>Add the meta character set tag.</li>
<li>Add a link tag to the <span class="highVAL"><span class="copyText">Lab03.css</span></span> css file.</li>
</ol>
</li>
<!-- Step 5 -->
<li class="pageA">Place an <span class="highELE">h1</span> heading tag as the first element in the <span class="highELE">body</span>. Set the innerHTML to the same content as the <span class="highELE">title</span> above.</li>
<!-- Step 6 -->
<li class="pageA">Add a hyperlink to the <span class="highELE">body</span> that will go to your second page: <span class="note">A hyperlink is created by the <span class="highELE">a</span> tag.</span> <span class="note">This is Link 1.</span>
<ol>
<li>Save this image <img src="images/handRight.png" width="115" height="55" alt="Hand pointing right"> in your <b>Lab03</b> folder.</li>
<li>The hyperlink must go to the <span class="copyText highVAL">JimMartinson_Lab03_B.html</span> page. <span class="note">hyperlink URL is defined by the <span class="highATT">href</span> attribute.</span></li>
<li>Set a shortcut of <span class="copyText highVAL">n</span>. <span class="note">shortcuts are set using the <span class="highATT">accesskey</span> attribute.</span></li>
<li>Set the tab order to <span class="copyText highVAL">4</span>. <span class="note">the tab order is set using the <span class="highATT">tabindex</span> attribute.</span></li>
<li>Set the <span class="copyText highATT">class</span> attribute value to <span class="copyText highVAL">page</span></li>
<li>The hyperlink innerHTML must contain:
<ol>
<li>The text <b class="copyText highINH">Next</b></li>
<li>The image above. Set the image <span class="copyText highATT">alt</span> to <span class="copyText highVAL">Hand pointing right</span>.
</li>
</ol>
</li>
</ol>
</li>
<!-- Step 7 -->
<li class="pageA">Add a hyperlink to the <span class="highELE">body</span> that will go to the bottom of your second page: <span class="note">This is Link 2.</span>
<ol>
<li>Place a hyperlink with the text <span class="highINH copyText">Bottom of Page 2</span> that goes to the <span class="highVAL">bottom</span> anchor on the <span class="copyText highVAL">JimMartinson_Lab03_B.html</span> page.
<span class="note">To jump to an anchor on a page, add a pound sign (<span class="highVAL">#</span>) and the name of the anchor to the end of the URL in the <span class="copyText highATT">href</span>'s value.</span>
</li>
<li>Set a shortcut of <span class="copyText highVAL">b</span>.</li>
<li>Set the tab order to <span class="copyText highVAL">3</span>.</li>
</ol>
</li>
<!-- Step 8 -->
<li class="pageA">Add a hyperlink to the <span class="highELE">body</span> that will open your second page in a new tab or window: <span class="note">This is Link 3.</span>
<ol>
<li>Place a hyperlink with the text <span class="highINH copyText">Page 2 in a new window</span> that opens <span class="highVAL copyText">JimMartinson_Lab03_B.html</span> in a new window.
<span class="note nowrap">This is done with the <span class="copyText"><span class="highATT">target=<span class="highVAL">"_blank"</span></span></span> attribute</span>
</li>
<li>Set a shortcut of <span class="copyText highVAL">o</span> <span class="note">This is a lowercase letter o.</span>.</li>
<li>Set the tab order to <span class="copyText highVAL">2</span>.</li>
</ol>
</li>
<!-- Step 9 -->
<li class="pageA">Add a hyperlink to the <span class="highELE">body</span> that will go to the CST1021 home page: <span class="note">This is Link 4.</span>
<ol>
<li>Place a hyperlink with the text <span class="highINH copyText">Class homepage</span> that opens <span class="highVAL copyText">http://cst.ridgewater.edu/JimMartinson/CST1021</span>.</li>
<li>Set a shortcut of <span class="copyText highVAL">c</span>.</li>
<li>Set the tab order to <span class="copyText highVAL">1</span>.</li>
</ol>
<div id="show_page_a" class="inline"><a href="#" onClick="divHide('show_page_a'); divShow('hide_page_a'); return false;">See an example of the first page:</a></div>
<div id="hide_page_a" class="hidden"><a href="#" onClick="divHide('hide_page_a'); divShowInline('show_page_a'); return false;">Hide the example.</a>
<!--BrowserBegin('Lab 3 - Jim Martinson - Page A - CST browser', 'file:///CST1021/JimMartinson_Lab03_A.html', '822', '')-->
<table class="nopad">
<!--Title bar-->
<tr>
<td style="background-image:url(/common/Browser/ul.png); background-repeat:no-repeat; width:8px; height:24px;"></td>
<td style="background-image:url(/common/Browser/u.png); background-repeat:repeat-x; width:806px; height:24px;"><img src="/common/Browser/cst.png" alt="" style="float:left; margin-top:2px;"><div style="font-size:smaller; float:left; margin-left:3px; margin-top:2px;">Lab 3 - Jim Martinson - Page A - CST browser</div></td>
<td style="background-image:url(/common/Browser/ur.png); background-repeat:no-repeat; width:8px; height:24px;"></td>
</tr>
<!--Location bar-->
<tr class="middle">
<td style="background-image:url(/common/Browser/l.png); background-repeat:repeat-y; width:8px;"></td>
<td style="background-image:url(/common/Browser/c.png); background-repeat:repeat; width:806px;">
<table class="nopad">
<tr>
<td style="width:62px;"><div style="font-size:smaller; float:left; margin-left:3px; margin-top:4px;">Location:</div></td>
<td><div style="background-color:#FFFFFF; border:1px solid silver; font-family:'Times New Roman', Times, serif; font-size:16px; overflow:hidden; padding:3px; text-align:left; white-space: nowrap; width:736px;"><img src="/common/Browser/cstw.png" alt="" style="float:left; margin-right:3px; margin-top:1px;">file:///CST1021/JimMartinson_Lab03_A.html</div></td>
</tr>
</table>
</td>
<td style="background-image:url(/common/Browser/r.png); background-repeat:repeat-y; width:8px;"></td>
</tr>
<!--Content-->
<tr>
<td style="background-image:url(/common/Browser/l.png); background-repeat:repeat-y; width:8px;"></td>
<td style="font-family:'Times New Roman', Times, serif; font-size:16px; text-align:left;"><div style="background-color:white; border:1px solid silver; padding:3px; text-align:left; width:798px;"> <img src="images/example1.png" alt="Example of JimMartinson_Lab03_A.html page">
</div></td>
<td style="background-image:url(/common/Browser/r.png); background-repeat:repeat-y; width:8px;"></td>
</tr>
<!--Status bar-->
<tr>
<td style="background-image:url(/common/Browser/bl.png); background-repeat:no-repeat; width:8px; height:8px;"></td>
<td style="background-image:url(/common/Browser/b.png); background-repeat:repeat-x; width:806px; height:8px;"></td>
<td style="background-image:url(/common/Browser/br.png); background-repeat:no-repeat; width:8px; height:8px;"></td>
</tr>
</table>
<!--BrowserEnd()-->
</div>
</li>
<!-- Step 10 -->
<li class="pageB">Create a second web page.
<ol>
<li>Name the file <b class="copyText">JimMartinson_Lab03_B.html</b>.</li>
<li>The page must contain the foundation tags. <a href="#notes" class="smaller">See notes</a></li>
</ol>
</li>
<!-- Step 11 -->
<li class="pageB">Place the following in the <span class="highELE">head</span> of your page: <a href="#notes" class="smaller">See notes</a>
<ol type="a">
<li>Title the page <span-content class="copyText">Lab 3 - Jim Martinson - Page B</span-content>.</li>
<li>Add the meta character set tag.</li>
<li>Add a link tag to the <span class="highVAL"><span class="copyText">Lab03.css</span></span> css file.</li>
</ol>
</li>
<!-- Step 12 -->
<li class="pageB">Place an <span class="highELE">h1</span> heading tag as the first element in the <span class="highELE">body</span>.
<ol>
<li>Set the innerHTML to the same content as the <span class="highELE">title</span> above.</li>
<li>Add an anchor named <span class="copyText highVAL">top</span>.
<span class="note">This is done with the <span class="copyText highATT">id</span> attribute.
<span class="nowrap">Anchors like this are used as locations on the page that can be jumped to with a hyperlink.</span></span>
</li>
</ol>
</li>
<!-- Step 13 -->
<li class="pageB">Add a hyperlink to the <span class="highELE">body</span> that goes back to your first page: <span class="note">This is Link 1.</span>
<ol>
<li>Save this image <img src="images/handLeft.png" width="115" height="55" alt="Hand pointing left"> in your <b>Lab03</b> folder.</li>
<li>The hyperlink must go to the <span class="copyText highVAL">JimMartinson_Lab03_A.html</span> page.</li>
<li>Set a shortcut of <span class="copyText highVAL">p</span>.</li>
<li>Set the tab order to <span class="copyText highVAL">1</span>.</li>
<li>Set the <span class="copyText highATT">class</span> attribute value to <span class="copyText highVAL">page</span></li>
<li>The hyperlink innerHTML must contain:
<ol>
<li>The image above. Set the image <span class="copyText highATT">alt</span> to <span class="copyText highVAL">Hand pointing left</span>.</li>
<li>The text <b class="copyText highINH">Previous</b></li>
</ol>
</li>
</ol>
</li>
<!-- Step 14 -->
<li class="pageB">Add a hyperlink to the <span class="highELE">body</span> that goes to the bottom of the page: <span class="note">This is Link 2.</span>
<ol>
<li>The hyperlink must go to the <span class="copyText highVAL">bottom</span> anchor.
<span class="note">To jump to an anchor on the same page, The URL only needs the pound sign (<span class="highVAL">#</span>) and the name of the anchor.</span>
</li>
<li>Set a shortcut of <span class="copyText highVAL">b</span>.</li>
<li>Set the tab order to <span class="copyText highVAL">2</span>.</li>
<li>The hyperlink innerHTML must contain <span class="highINH copyText">Bottom of Page</span>.</li>
</ol>
</li>
<!-- Step 15 -->
<li class="pageB">Add an image and image map to the <span class="highELE">body</span>: <span class="note">These will be Links 3, 4, and 5.</span>
<ol>
<li>Save the following image in your <b>Lab03</b> folder:
<br><img src="images/search.png" width="450" height="200" alt="Search sites" style="border: 1px solid silver;">
</li>
<li>Add the image to your page.
<ol>
<li>The image <span class="copyText highATT">width</span> is <span class="copyText highATT">450</span> px.</li>
<li>The image <span class="copyText highATT">height</span> is <span class="copyText highATT">200</span> px.</li>
<li>Set the image <span class="copyText highATT">alt</span> to <span class="copyText highVAL">Search sites</span>.</li>
<li>Set the image to use the map below.
<span class="note nowrap">This is done with the <span class="copyText highATT">usemap</span> attribute.</span>
<span class="note nowrap">The <span class="copyText highATT">usemap</span> attribute value must begin with a <span class="copyText highVAL">#</span>.</span>
</li>
</ol>
</li>
<li>Add a <span class="highELE">map</span> element below the image.
<br>Create the following <span class="highELE">area</span> elements in the <span class="highELE">map</span>:
<ol>
<li>The <b>bing</b> part of the image links to <b><a href="https://www.bing.com">https://www.bing.com</a></b> and be a rectangular area.
Give the <span class="highELE">area</span> a <span class="copyText highATT">title</span> attribute with the value of <span class="copyText highVAL">Search with Bing.</span>. Set the tab order to 3.
</li>
<li>The <b>Google</b> part of the image links to <b><a href="https://www.google.com">https://www.google.com</a></b> and be a rectangular area.
Give the <span class="highELE">area</span> a <span class="copyText highATT">title</span> attribute with the value of <span class="copyText highVAL">Search with Google.</span>. Set the tab order to 4.
</li>
<li>The <b>Y!</b> part of the image links to <b><a href="https://www.yahoo.com">https://www.yahoo.com</a></b> and be a circular area.
Give the <span class="highELE">area</span> a <span class="copyText highATT">title</span> attribute with the value of <span class="copyText highVAL">Search with Yahoo!</span>. Set the tab order to 5.
</li>
</ol>
</li>
<li>Insert some filler text on the page.
There must be enough filler text to cause the window to scroll.
This is needed to demonstrate the <span class="highVAL">top</span> and <span class="highVAL">bottom</span> anchors effectively.
</li>
</ol>
</li>
<!-- Step 16 -->
<li class="pageB">Add a hyperlink at the bottom of the <span class="highELE">body</span> that goes to the top of the page: <span class="note">This is Link 6.</span>
<ol>
<li>The hyperlink must go to the <span class="copyText highVAL">top</span> anchor.</li>
<li>Set a shortcut of <span class="copyText highVAL">t</span>.</li>
<li>Set the tab order to <span class="copyText highVAL">6</span>.</li>
<li>The hyperlink innerHTML must contain <span class="highINH copyText">Top of Page</span>.</li>
<li>Add an anchor named <span class="copyText highVAL">bottom</span>.</li>
</ol>
<div id="show_page_b" class="inline"><a href="#" onClick="divHide('show_page_b'); divShow('hide_page_b'); return false;">See an example of the second page:</a></div>
<div id="hide_page_b" class="hidden"><a href="#" onClick="divHide('hide_page_b'); divShowInline('show_page_b'); return false;">Hide the example.</a>
<!--BrowserBegin('Lab 3 - Jim Martinson - Page B - CST browser', 'file:///CST1021/JimMartinson_Lab03_B.html', '822', '')-->
<table class="nopad">
<!--Title bar-->
<tr>
<td style="background-image:url(/common/Browser/ul.png); background-repeat:no-repeat; width:8px; height:24px;"></td>
<td style="background-image:url(/common/Browser/u.png); background-repeat:repeat-x; width:806px; height:24px;"><img src="/common/Browser/cst.png" alt="" style="float:left; margin-top:2px;"><div style="font-size:smaller; float:left; margin-left:3px; margin-top:2px;">Lab 3 - Jim Martinson - Page B - CST browser</div></td>
<td style="background-image:url(/common/Browser/ur.png); background-repeat:no-repeat; width:8px; height:24px;"></td>
</tr>
<!--Location bar-->
<tr class="middle">
<td style="background-image:url(/common/Browser/l.png); background-repeat:repeat-y; width:8px;"></td>
<td style="background-image:url(/common/Browser/c.png); background-repeat:repeat; width:806px;">
<table class="nopad">
<tr>
<td style="width:62px;"><div style="font-size:smaller; float:left; margin-left:3px; margin-top:4px;">Location:</div></td>
<td><div style="background-color:#FFFFFF; border:1px solid silver; font-family:'Times New Roman', Times, serif; font-size:16px; overflow:hidden; padding:3px; text-align:left; white-space: nowrap; width:736px;"><img src="/common/Browser/cstw.png" alt="" style="float:left; margin-right:3px; margin-top:1px;">file:///CST1021/JimMartinson_Lab03_B.html</div></td>
</tr>
</table>
</td>
<td style="background-image:url(/common/Browser/r.png); background-repeat:repeat-y; width:8px;"></td>
</tr>
<!--Content-->
<tr>
<td style="background-image:url(/common/Browser/l.png); background-repeat:repeat-y; width:8px;"></td>
<td style="font-family:'Times New Roman', Times, serif; font-size:16px; text-align:left;"><div style="background-color:white; border:1px solid silver; padding:3px; text-align:left; width:798px;"> <img src="images/example2.png" alt="Example of JimMartinson_Lab03_B.html page">
</div></td>
<td style="background-image:url(/common/Browser/r.png); background-repeat:repeat-y; width:8px;"></td>
</tr>
<!--Status bar-->
<tr>
<td style="background-image:url(/common/Browser/bl.png); background-repeat:no-repeat; width:8px; height:8px;"></td>
<td style="background-image:url(/common/Browser/b.png); background-repeat:repeat-x; width:806px; height:8px;"></td>
<td style="background-image:url(/common/Browser/br.png); background-repeat:no-repeat; width:8px; height:8px;"></td>
</tr>
</table>
<!--BrowserEnd()-->
</div>
</li>
<!-- Step 17 -->
<li class="">Turn in your assignment:
<ol type="a">
<li>Make sure the following files are in your <b>Lab03</b> folder:
<ol type="a">
<li>JimMartinson_Lab03_A.html</li>
<li>JimMartinson_Lab03_B.html</li>
<li>Lab03.css</li>
<li>handRight.png</li>
<li>handLeft.png</li>
<li>search.png</li>
</ol>
</li>
<li>Zip up your <b>Lab03</b> folder into a file named <b class="copyText">CST1021_JimMartinson_Lab03.zip</b>.</li>
<li>Browse and select your <b>CST1021_JimMartinson_Lab03.zip</b> file: <input type="file" name="fileUpload" id="inpFileUpload"><div id="divFileploadError"></div></li>
<li>Then <input type="submit" name="f_subtask" id="inpSubmit" value="Submit"> for grading.</li>
</ol>
</li>
</ol></fieldset>
<fieldset id="notes"><legend>Notes:</legend>
<div>
<b>We will be using the following foundation tags in every html page throughout this class:</b>
<ol>
<li>The HTML 5 DOCTYPE: <span class="highEL copyText" id="spanDOCTYPE"><!DOCTYPE html></span>.</li>
<li>An html tag with the <span class="highATT">lang</span> attribute set to <span class="highVAL">en</span>: <span class="highEL copyText"><html <span class="highATT">lang="<span class="highVAL">en</span>"</span>></span>.</li>
<li>A <span class="highELE">head</span> section containing:
<ol style="list-style-type: lower-roman">
<li>A <span class="highELE">title</span> tag with the title directed above: <span class="copyText"><span class="highEL"><title></span><span class="highINH">replace_with_title_above</span><span class="highEL"></title></span></span>.</li>
<li>The meta character set tag <span class="highEL copyText"><meta <span class="highATT">charset="<span class="highVAL">utf-8</span>"</span>></span>.</li>
<li>A <span class="highELE">link</span> tag to the <span class="highVAL">Lab03.css</span> file: <span class="highEL copyText"><link <span class="highATT">href="<span class="highVAL">Lab03.css</span>"</span> <span class="highATT">rel="<span class="highVAL">stylesheet</span>"</span>></span></li>
</ol>
</li>
<li>A <span class="highELE">body</span> section containing:
<ol>
<li>An <span class="highELE">h1</span> heading as the first element in the body with content the same as the title above.</li>
<li>The rest of your html code... <span class="note">Except for any needed internal <span class="highELE">style</span> elements, which would go in the head section.</span></li>
</ol>
</li>
</ol>
</div>
<div class="hp">
The <b>HTML</b> in the instructions is color coded to make it easier for you to understand:
<ul>
<li>Elements (tags) are color coded like <span class="highELE">tag</span>.</li>
<li>Tag attributes are color coded like <span class="highATT">attribute</span>.</li>
<li>Attribute values are color coded like <span class="highVAL">value</span>.</li>
<li>The innerHtml (content) for elements (tags) are color coded like <span-content>innerHtml</span-content>.</li>
</ul>
The <b>CSS</b> in the instructions is color coded to make it easier for you to understand:
<ul>
<li>CSS selectors are color coded like <span class="highCSS">selector</span>.</li>
<li>CSS properties are color coded like <span class="highCSP">property</span>.</li>
<li>CSS property values are color coded like <span class="highCSV">value</span>.</li>
</ul>
</div>
<div class="hp">
Further, instructions for CSS and HTML have a background color:
<ul>
<li>
For the first or only page:
<ul>
<li class="css">CSS instuctions have this background color.</li>
<li class="page">HTML instuctions have this background color.</li>
</ul>
</li>
<li>
For a second page:
<ul>
<li class="cssB">CSS instuctions have this background color.</li>
<li class="pageB">HTML instuctions have this background color.</li>
</ul>
</li>
</ul>
</div>
</fieldset> <input name="f_uploadFilename" id="hid_uploadFilename" type="hidden" value="CST1021_JimMartinson_Lab03.zip">
</form>
<script>
// checkFileUpload()
// Ensure a file has been selected for upload.
function checkFileUpload() {
let uploadOK = false;
let DEBUG = true;
if ( document.getElementById('inpFileUpload') ) {
let eUpload = document.getElementById('inpFileUpload'); // The input type="file" element.
let eUploadError = document.getElementById('divFileploadError'); // The following div element to display an error.
eUploadError.innerHTML = '';
let eUploadFile = document.getElementById('hid_uploadFilename'); // The filename(s) needed for the upload file.
let filesToUpload = eUploadFile.value.split(',');
let filesToUploadCount = filesToUpload.length;
if ( eUpload.value != "" ) {
// Get the list of files to upload from hid_uploadFilename
if ( DEBUG ) { console.log(`${PC}Files to upload count=${filesToUploadCount} filesToUpload=${filesToUpload}`,CI); }
let filesSelectedForUpload = eUpload.files;
let filesSelectedForUploadCount = filesSelectedForUpload.length;
if ( DEBUG ) {
console.log(`${PC}Files selected for upload count=${filesSelectedForUploadCount}`,CL);
for (let i = 0; i < filesSelectedForUploadCount; i++) {
console.log(`${PC}Filename[${i}]=${filesSelectedForUpload[i].name}.`,CL);
}
}
if (filesToUploadCount === filesSelectedForUploadCount ) {
let fileNameOKcount = 0;
let prefix = '';
for ( let i = 0; i < filesSelectedForUploadCount; i++ ) {
let fileNameToUpload = filesSelectedForUpload[i].name;
if ( filesToUpload.includes(fileNameToUpload) ) {
fileNameOKcount++;
} else {
eUploadError.innerHTML += prefix + ' An incorrect file ['+fileNameToUpload+'] was selected for upload.';
}
}
if ( fileNameOKcount === filesToUploadCount ) { uploadOK = true; }
} else {
uploadOK = false;
eUploadError.innerHTML = ' An incorrect number of files selected for upload.';
}
} else {
if ( filesToUploadCount !== 0 ) {
eUploadError.innerHTML = ' No file was selected for upload.';
uploadOK = false;
} else {
uploadOK = true;
}
}
} else {
uploadOK = true;
}
if ( DEBUG ) { console.log(`${PC}uploadOK=${uploadOK}`,CL); }
//uploadOK = false;
return uploadOK;
} // END checkFileUpload.
//let e_formAssignment = document.getElementById('formAssignment');
//e_formAssignment.addEventListener('submit', checkFileUpload);
let DEBUG = false;
let ttLIshown = false;
let counter1 = 0;
let counter2 = 0;
let counter3 = 0;
let counter4 = 0;
let counter5 = 0;
let ttFunction = ttCheck;
function _Initialize_Page() {
var DEBUG = false;
if ( DEBUG ) { console.groupCollapsed(`${PC}_Initialize_Page[]`,CG); } else { console.log(`${PC}_Initialize_Page[]`,CH); }//
// Setup li elements so they can be checked off, unchecked.
let liAll = document.getElementsByTagName('li'); // Get collection of li elements.
//console.dir(liAll[3]);
if ( DEBUG ) { console.log(`${PC}liAll.length=${liAll.length}`,CL); }
for ( let i=0; i<liAll.length; i++ ) { // Loop thru li elements.
let li= liAll[i];
// Search for OL and FORM parentNodes.
let pNodes = '';
var eWalk = li;
let hasOL = false;
let addListener = false;
let depth = 0;
while( eWalk && eWalk.tagName && eWalk.tagName !== "BODY" ) { // Parse up the DOM.
if ( eWalk.nodeName == 'OL' && eWalk.className.search('nocheck') === -1) { // Is this an OL w/o nocheck class?
//console.dir(eWalk);
//console.log(eWalk.className.search('nocheck'));
hasOL= true; // Set true so addListener can be set true if FORM is found.
depth++; // Increase the list depth.
} // Is this an OL w/o nocheck class?
if ( hasOL && eWalk.nodeName == 'FORM' ) { // Is the OL in a FORM?
addListener= true; // Both OL and FORM found. Event listener should be added.
} // Is the OL in a FORM?
pNodes += ','+ eWalk.nodeName; // Keep a list of nodeNames.
eWalk = eWalk.parentNode; // Get the next parentNode.
} // Parse up the DOM.
if ( addListener ) { // Should an event listener be added?
// Calculate the counter for the li element
// This works to a depth of 5. Should probably we written as a recursive function.
switch ( depth ) {
case 1:
counter1++;
counter = counter1.toString();
counter2 = 0;
counter3 = 0;
counter4 = 0;
counter5 = 0;
break;
case 2:
counter2++;
counter = counter1.toString()+'.'+counter2.toString();
counter3 = 0;
counter4 = 0;
counter5 = 0;
break;
case 3:
counter3++;
counter = counter1.toString()+'.'+counter2.toString()+'.'+counter3.toString();
counter4 = 0;
counter5 = 0;
case 4:
counter4++;
counter = counter1.toString()+'.'+counter2.toString()+'.'+counter4.toString();
counter5 = 0;
break;
case 5:
counter5++;
counter = counter1.toString()+'.'+counter2.toString()+'.'+counter4.toString()+'.'+counter5.toString();
break;
}
li.counter = counter; // Add the counter to the li element.
li.style.zIndex = depth - 5; // Set a negative zIndex with the deepest element closest to the top.
//li.style.listStylePosition = 'outside';
//li.style.listStylePosition = 'inside';
if ( DEBUG ) { console.log(`${PC}${counter} hasOL=${hasOL} addListener=${addListener} pNodes=${pNodes} depth=${depth}`,CI); }
// Add the click event listener.
li.addEventListener('click', event => {
if ( ttLIshown ) {
//console.log(`${PC}ttHide[]`,CD);
ttHide();
ttLIshown = false;
}
if ( typeof e.counter !== 'undefined' ) { // Is it defined?
let e = event.target;
let isOK = isOverLiBefore(e);
//console.log(`${PC}counter=${e.counter} zIndex=${e.style.zIndex} className=${e.className}`,CL);
if ( isOK ) {
if ( DEBUG ) { console.log(`${PC}e.className=${e.className}`,CL); }
if ( e.className.indexOf('checked') === -1 ) { // Is it unchecked?
// Unchecked li. Check it.
//console.log(`${PC}Unchecked li. Check it.`,CS);
e.className = e.className + ' checked';
e.saveBackgroundColor = e.style.backgroundColor;
//li.style.listStylePosition = 'outside';
e.style.backgroundColor = '#ddd';
e.style.opacity = "0.66";
event.stopPropagation();
ttFunction = ttUncheck;
} else { // Is it unchecked?
// Checked li. Uncheck it.
//console.log(`${PC}Checked li. Uncheck it.`,CS);
e.className = e.className.replace(' checked','');
e.style.backgroundColor = e.saveBackgroundColor;
//li.style.listStylePosition = 'outside';
e.style.opacity = "1.0";
event.stopPropagation();
ttFunction = ttCheck;
} // Is it unchecked?
//console.log(`${PC}e.className=${e.className}`,CD);
} else {
//console.log(`${PC}Mouse out of range.`,CW);
}
} // Is it defined?
}) // END click.
// Add the mouseleave event listener.
li.addEventListener('mouseleave', event => {
event.stopPropagation();
if ( ttLIshown ) {
//console.log(`${PC}ttHide[]`,CD);
ttHide();
ttLIshown = false;
}
}) // END mouseleave.
// Add the mousemove event listener.
li.addEventListener('mousemove', event => {
mouseXY(event);
e = event.target;
let isOK = isOverLiBefore(e);
if ( isOK ) {
ttFunction(event);
} else {
if ( ttLIshown ) {
//console.log(`${PC}ttHide[]`,CD);
ttHide();
ttLIshown = false;
}
}
//if ( DEBUG ) { console.log(`${PC}mouse mx=${mx} my=${my}`,CL); }
}) // END mousemove.
} // Should an event listener be added?
} // Loop thru li elements.
if ( DEBUG ) { console.groupEnd(); }
} // END _Initialize_Page.
// ttCheck(evt)
// Show the check tooltip.
function ttCheck(evt) {
e = evt.target;
let isOK = isOverLiBefore(e);
if ( isOK && typeof e.counter !== 'undefined' ) {
//console.log(`${PC}e.className=${e.className}`,CL);
ttShow('Click to check step '+e.counter+' as finished.','info');
ttLIshown = true;
}
} // END ttCheck.
// ttUncheck(evt)
// Show the uncheck tooltip.
function ttUncheck(evt) {
e = evt.target;
let isOK = isOverLiBefore(e);
if ( isOK && typeof e.counter !== 'undefined' ) {
//console.log(`${PC}e.className=${e.className}`,CL);
ttShow('Click to uncheck step'+e.counter+'.','info');
ttLIshown = true;
}
} // END ttCheck.
// isOverLiBefore(e)
// Return true if the mouse is over the li::before, else false.
function isOverLiBefore(e) {
var DEBUG = false;
let depth = parseInt(e.style.zIndex) + 5;
if ( DEBUG ) { console.group(`${PC}isOverLiBefore[e.nodeName=${e.nodeName} .counter=${e.counter} .depth=${depth}]`,CG); }//Collapsed
let isOK = true;
let liBounds = ElementBounds(e);
if ( DEBUG ) { console.log(`${PC}my=${my} li.top=${liBounds.top} my>liBounds.top+22=${(my > liBounds.top + 22)}`,CL); }
// Ensure my is over li::before.
if ( ( typeof my === 'undefined' ) || my > liBounds.top + 22 ) { // Is my too low?
// Yes, my too low.
isOK = false;
} else { // Is my too low?
// No, check mx.
// Calculate the li number text width.
let counterText = e.counter;
let e_spnToMeasureCounterTextWidth = document.getElementById('spnToMeasureCounterTextWidth');
e_spnToMeasureCounterTextWidth.innerHTML = counterText + '. ';
e_spnToMeasureCounterTextWidth.style.display = 'table-cell';
let counterTextWidth = e_spnToMeasureCounterTextWidth.offsetWidth;
e_spnToMeasureCounterTextWidth.style.display = 'none';
let depthReduction = Math.pow(depth, 2) * 3;
if ( DEBUG ) { console.log(`${PC}counterTextWidth=${counterTextWidth} depthReduction=${depthReduction}`,CL); }
let mxMin = liBounds.left;
let mxOffset = mx + 34;
let mxMax = liBounds.left + counterTextWidth;// - depthReduction;
if ( DEBUG ) { console.log(`${PC}mx=${mx} mxMin=${mxMin} mxMax=${mxMax} counterTextWidth=${counterTextWidth}`,CI); }
if ( mx < mxMin || mx > mxMax ) { // Is to far left or right? 1 2 3, 1 4 9, 1 4 27
isOK = false;
} // Is to far left or right?
} // Is my too low?
if ( DEBUG ) { console.groupEnd(); }
if ( DEBUG ) { console.log(`${PC}isOK=${isOK}`,CS); }
return isOK
} // END isOverLiBefore.
</script>
<span id="spnToMeasureCounterTextWidth">0</span>
<fieldset><legend>Grading Criteria</legend>
<div>
-30 if the <a href="https://jigsaw.w3.org/css-validator/validator.html.en#validate_by_input">CSS Validation Service</a> or <a href="https://validator.w3.org/#validate_by_input">Markup Validation Service</a> report errors.
No further grading will be done.
<table>
<tr>
<th>Criteria</th>
<th class="right">Points</th>
</tr>
<tr>
<td>Links are correct.</td>
<td class="number">10</td>
</tr>
<tr>
<td>Link tab order and shortcuts are correct.</td>
<td class="number">6</td>
</tr>
<tr>
<td>Image map is correct.</td>
<td class="number">6</td>
</tr>
<tr>
<td>Anchors are correct and in correct location.</td>
<td class="number">4</td>
</tr>
<tr>
<td>HTML is well formatted and follows lab requirements.<br><span class="note">Do not add any additional code or styling other than what is required by the lab.
<br>I will deduct points for additional code or styling that are or cause problems.</span></td>
<td class="number">4</td>
</tr>
<tr>
<th class="right">Total:</th>
<th class="bold number">30</th>
</tr>
</table>
</div>There are some things I expect. If they are incorrect you will lose the following:
<br>
Work submitted incorrectly: -3 pts. This covers errors such as incorrect files names, incorrect file formats, poor formatting, etc.
<br>
Second and subsequent submission of work for grading: -3 pts.
<br>
Work submitted late: -3 pts per week.
<br>
I reserve the right <b>not</b> to apply the deduction points at my absolute discretion.
</fieldset>
</td>
<td class="blackBorderRight"></td>
</tr>
</table>
<!-- End section 2 -->
<div id="div_copyright" class="copyright">
IP=134.29.175.74 userId=1 <br>
©1998-2022 </div>
<div id="tooltipContainer"><div id="tooltipDiv"><!-- Needed for tooltip --></div></div>
<script>
// pageFooter.phpinc:37.
function capitalizeMe(obj) {
var val = obj;
var newVal = '';
var val = val.split(' ');
for(var c=0; c < val.length; c++) {
newVal += val[c].substring(0,1).toUpperCase() + val[c].substring(1,val[c].length) + ' ';
}
return newVal.replace(new RegExp("[" + "\\s" + "]+$", "g"), "");
}
var server = 'ridgewater';
var domain = 'edu';
var first = 'jim';
var last = 'martinson';
var ea = '<a href="' + 'mail' + 'to:' + first + '.' + last + '@' + server + '.' + domain + '" style="color:darkgray;">' + capitalizeMe(first+' '+last) + '</a>';
//document.write(ea);
document.getElementById('div_copyright').innerHTML = document.getElementById('div_copyright').innerHTML+ea;
var LOCK_BELOW = 99;
var trueuserId = 1;
var userId = 1;
var userPermissions = ['USER', 'ADMIN'];
CollapsibleLists.apply();
// onload:
_Initialize();
</script>
</body>
</html>