| 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/Lab04/ |
Upload File : |
<?
// JimMartinson/CST1021/Labs/Lab03/Lab03.phpinc
$css .= ',colorCode.css';
require('Gradebook/EvaluationSubmission_BEGIN.phpinc'); // Replaced.
$disabled = '';
$disabled = ' disabled'; // Comment this line to enable lab.
?>
<a id="Lab"></a>
<fieldset><legend>Description</legend>
The purpose of this lab is to demonstrate your ability to use images on a web page.
<br>
<?=$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">
<!-- 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>
<!-- 2 -->
<li class="css">Download <b><a href="<?=$evaluationName?>.css"><?=$evaluationName?>.css</a></b> and save it in your <b><?=$evaluationName?></b> folder.</li>
<!-- 3 -->
<li class="page">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?>.html</b>.</li>
<li>The page must contain the foundation tags. <a href="#notes" class="smaller">See notes</a></li>
<li>Title the page <span-content class="copyText"><?=$pageTitle?></span-content>.</li>
</ol>
</li>
<!-- 4 -->
<li class="page">Add an image of your choosing that you find from the web or already have.
<ol>
<li>Put the image in your <b><?=$evaluationName?></b> folder.</li>
<li>It should be sized appropriately so that it is not extremely large.
<br>The image must be 600 pixels or less in each dimension.</li>
<li>There must be an alt attribute assigned.</li>
<li>Center the image. You could style it with: <span-content class="copyText">display: block; margin-left: auto; margin-right: auto;</span-content>.</li>
</ol>
<span class="note normal">Display all images for this lab in their actual sizes. If you want the image in a different size, then re-size it using an image editor, not html or css. Your <span class="highELE">img</span> elements <strong>must</strong> be styled with css or via the <span class="highATT" style="display: inline-block;">width</span> and <span class="highATT">height</span> attributes to display the <span class="highELE">img</span> in its native size.</span>
</li>
<!-- 5 -->
<li class="page">Add a horizontal rule going half way across the page and centered.</li>
<!-- 6 -->
<li class="page">Add two more images of your choice.
<ol>
<li>Put the images in your <b><?=$evaluationName?></b> folder.</li>
<li>Place one image on the left and the other on the right.
<br>
<span class="note normal">
This can only be done using css. Search <b class="copyText">css float images</b>.
There are other methods to do this but float is the easiest.
</span>
</li>
<li>Each image must have the alt attribute assigned.</li>
<li>Each image must also be 300 pixels or less in each dimension.</li>
</ol>
<span class="note normal">Do not add any block elements like <span class="highELE">div</span>, <span class="highELE">p</span>, etc... around or between the images as this may drastically change how the page is rendered in the browser.</span>
</li>
<!-- 7 -->
<li class="page">Add some text after these two images.
<span class="note normal">The text must flow around the images in the browser. Make sure you have enough text that this is easily visible when the browser window is narrow enough.</span>
</li>
<!-- 8 -->
<li class="page">
Add another horizontal rule going half way across the page and centered. The horizontal rule must display below the images even when the text does not extend below them.
<br>
<span class="note normal">
If you used css float to position your images, try a <span class="highATT copyText">class</span> attribute with the value <span class="highVAL copyText">clear_both</span>.
There is a <span class="highCSS">.clear_both</span> class rule in the downloaded <?=$evaluationName?>.css file that does this.
</span>
</li>
<!-- 9-->
<li class="page">I have an additional image that I want you to add.
Download and save <a href="images/collage.bmp">it (collage.bmp)</a> in your <b><?=$evaluationName?></b> folder.
<ol>
<li>Edit the image.
<ol>
<li>Rotate the image 90 degrees to the right.</li>
<li>Resize the image to 1/2 of its original size.</li>
<li>Convert the image to jpeg and save it as "collage.jpg".</li>
</ol>
</li>
<li>Place the image at the bottom of the page (You must include an <span class="highATT">alt</span> attribute of <span class="highVAL copyText">collage</span>.).</li>
</ol>
<span class="note normal">You can use a simple viewier/editor like <a href="/JimMartinson/Setup/IrfanView/iview438_setup.exe">IrfanView (iview438_setup.exe)</a> to modify the image.</span>
<br>
<div id="show_page" class="inline"><a href="#" onClick="divHide('show_page'); divShow('hide_page'); return false;">See an example:</a></div>
<div id="hide_page" class="hidden"><a href="#" onClick="divHide('hide_page'); divShowInline('show_page'); return false;">Hide the example.</a>
<? require('common/Browser/Browser.phpinc');
BrowserBegin($evaluationType.' '.$evaluationNumber.' - '.$userFullName,'file:///'.$courseNumber.'/'.$evaluationName.'/'.$evaluationName.'.html',822); ?>
<h1><?=$pageTitle?></h1>
<img src="images/example.png?20220217" alt="example">
<? BrowserEnd(); ?>
</div>
<br>
<div id="show_page2" class="inline"><a href="#" onClick="divHide('show_page2'); divShow('hide_page2'); return false;">See an example that has less text:</a></div>
<div id="hide_page2" class="hidden"><a href="#" onClick="divHide('hide_page2'); divShowInline('show_page2'); return false;">Hide the example.</a>
<?
BrowserBegin($evaluationType.' '.$evaluationNumber.' - '.$userFullName,'file:///'.$courseNumber.'/'.$evaluationName.'/'.$evaluationName.'.html',822); ?>
<h1><?=$pageTitle?></h1>
<img src="images/example2.png?20220217" alt="example 2">
<? BrowserEnd(); ?>
</div>
</li>
<!-- 10 -->
<li>Turn in your assignment:
<ol type="a">
<li>Make sure the following files are in your <b><?=$evaluationName?></b> folder:
<?
$filesToSubmit = array(
$saveFilename.'.html',
'Lab04.css',
'collage.bmp',
'collage.jpg',
'The three images that you selected for this lab.'
);
showFileList($filesToSubmit);
?>
</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'); ?>
<script src="/js/colorCode.js"></script>
<?
$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.
<br>
-assignmentPoints if any image has and incorrect src attribute value.
No further grading will be done.
<table>
<tr>
<th>Criteria</th>
<th class="right">Points</th>
</tr>
<tr>
<td>Correct <span class="highELE">DOCTYPE</span>, <span class="highELE">html</span>, <span class="highELE">head</span>, <span class="highELE">title</span>, <span class="highELE">meta</span> <span class="highATT">charset</span>, <span class="highELE">body</span>, and <span class="highELE">h1</span> tags.</td>
<td class="number">4</td>
</tr>
<tr>
<td>First image with alt.</td>
<td class="number">2</td>
</tr>
<tr>
<td>Correct horizontal rule.</td>
<td class="number">2</td>
</tr>
<tr>
<td>Correct aligned images with text.</td>
<td class="number">4</td>
</tr>
<tr>
<td>Correct <span class="highELE"><br</span> <span class="highATT">class</span><span class="highVAL">="clear_both"</span><span class="highELE">></span> and edited collage image.</td>
<td class="number">4</td>
</tr>
<tr>
<td>HTML is well formatted and follows lab requirements.</td>
<td class="number">4</td>
</tr>
<tr>
<td><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></td>
</tr>
<tr>
<th class="right">Total:</th>
<th class="bold number">assignmentPoints</th>
</tr>
</table>
';
?>
<?
require('Gradebook/EvaluationSubmission_END.phpinc'); // Replaced.
#require('../../ReferencesResources.phpinc');
#require($Instructor['Path'].'/ContactInformation.phpinc');
if ($TRACK != '') $_SESSION['TRACK'] .= "<li>End ".basename(__FILE__)."</ol>\n";
?>