| 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:/nginx/html/JimMartinson/CST1021/Labs/Lab03/ |
Upload File : |
<?
// JimMartinson/CST1021/Labs/Lab04/Lab04.phpinc
$css .= ',colorCode.css';
require('Gradebook/EvaluationSubmission_BEGIN.phpinc'); // Replaced.
$disabled = '';
$disabled = ' disabled'; // Comment this line to enable lab.
?>
<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 should 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.
<?=$gradeNote?>
<? if ( $disabled ) { ?><span class="error bold">Notice: Do not perform this assignment unless this notice has been removed.</span><? } ?>
</fieldset>
<fieldset><legend><?=$evaluationType?> Instruction</legend>
<ol id="main" class="count">
<!-- Step 1 -->
<li>Create a folder for this <?=strtolower($evaluationType)?> named <b class="copyText"><?=$evaluationName?></b> and keep all documents used for <?=$evaluationType?> <?=$evaluationNumber?> in that folder.</li>
<!-- Step 2 -->
<li class="css">Download <b><a href="<?=$evaluationName?>.css" onMouseOver="ttShow('Click to download.')" onMouseOut="ttHide();"><?=$evaluationName?>.css</a></b> and save it in your <b><?=$evaluationName?></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"><?=$saveFileName_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"><?=$pageTitle_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"><?=$evaluationName?>.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><?=$evaluationName?></b> folder.</li>
<li>The hyperlink must go to the <span class="copyText highVAL"><?=$saveFileName_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"><?=$saveFileName_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"><?=$saveFileName_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 <?=$courseNumber?> 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://<?=$_SERVER['SERVER_NAME']?>/<?=$Instructor['Path']?>/<?=$courseNumber?></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>
<? require('common/Browser/Browser.phpinc'); BrowserBegin($pageTitle_A,'file:///'.$courseNumber.'/JimMartinson_Lab03_A.html',822); ?>
<img src="images/example1.png" alt="Example of JimMartinson_Lab03_A.html page">
<? BrowserEnd(); ?>
</div>
</li>
<!-- Step 10 -->
<li class="pageB">Create a second web page.
<ol>
<li>Name the file <b class="copyText"><?=$saveFileName_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"><?=$pageTitle_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"><?=$evaluationName?>.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> to the h1 element.
<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><?=$evaluationName?></b> folder.</li>
<li>The hyperlink must go to the <span class="copyText highVAL"><?=$saveFileName_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><?=$evaluationName?></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 is a rectangular area.
Give the <span class="highELE">area</span> both <span class="copyText highATT">alt</span> and <span class="copyText highATT">title</span> attributes with the values 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 is a rectangular area.
Give the <span class="highELE">area</span> both <span class="copyText highATT">alt</span> and <span class="copyText highATT">title</span> attributes with the values 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 is a circular area.
Give the <span class="highELE">area</span> both <span class="copyText highATT">alt</span> and <span class="copyText highATT">title</span> attributes with the values 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> to the hyperlink.</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($pageTitle_B,'file:///'.$courseNumber.'/JimMartinson_Lab03_B.html',822); ?>
<img src="images/example2.png" alt="Example of JimMartinson_Lab03_B.html page">
<? BrowserEnd(); ?>
</div>
</li>
<!-- Step 17 -->
<li class="">Turn in your assignment:
<ol type="a">
<li>Make sure the following files are in your <b><?=$evaluationName?></b> folder:
<ol type="a">
<li><?=$saveFileName_A?>.html</li>
<li><?=$saveFileName_B?>.html</li>
<li><?=$evaluationName?>.css</li>
<li>handRight.png</li>
<li>handLeft.png</li>
<li>search.png</li>
</ol>
</li>
<li>Zip up your <b><?=$evaluationName?></b> folder into a file named <b class="copyText"><?=$uploadFilename?></b>.</li>
<li>Browse and select your <b><?=$uploadFilename?></b> file: <input type="file" name="fileUpload" id="inpFileUpload"<?=$disabled?>><div id="divFileploadError"></div></li>
<li>Then <input type="submit" name="f_subtask" id="inpSubmit" value="Submit"<?=$disabled?>> for grading.</li>
</ol>
</li>
</ol><? if ( $disabled ) { ?><span class="error bold">Notice: Do not perform this assignment unless this notice has been removed.</span><? } ?>
</fieldset>
<?
require('../LabNotes.phpinc');
$PartialGradingCriteria = '
-assignmentPoints 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 incorrect or cause problems.</span></td>
<td class="number">4</td>
</tr>
<tr>
<th class="right">Total:</th>
<th class="bold number">assignmentPoints</th>
</tr>
</table>
';
require('Gradebook/EvaluationSubmission_END.phpinc'); // Replaced.
if ($TRACK != '') $_SESSION['TRACK'] .= "<li>End ".basename(__FILE__)."</ol>\n";
?>