| 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/_Archive/MMDT1021/ |
Upload File : |
<?
// Lab05.php
$TRACK = "<b>".basename(__FILE__).'</b> <span class="pv_fl">('.__FILE__.")</span>\n<ol>\n";
ini_set('include_path',ini_get('include_path').PATH_SEPARATOR.$_SERVER['DOCUMENT_ROOT']."/"); // Add the DOCUMENT_ROOT to the include_path.
$thisFile=__FILE__; $thisLine=__LINE__; include('application.phpinc');
$thisFile=__FILE__; $thisLine=__LINE__; include('Course/courseInfo.phpinc');
$thisFile=__FILE__; $thisLine=__LINE__; include('classInfo.phpinc');
$assignmentNumber = 7;
$assignmentType = "Lesson";
$assignmentTitle = "Working with Style Sheet Files";
$evaluationNumber = 5;
$evaluationType = "Lab";
$evaluationTitle = "Working with Style Sheet Files";
if (!isset($evaluationNumber)) { $evaluationNumber = $assignmentNumber; }
if (strlen($assignmentNumber) == 1) { $assignmentName = $assignmentType."0".$assignmentNumber; } else { $assignmentName = $assignmentType.$assignmentNumber; }
if (strlen($evaluationNumber) == 1) { $evaluationName = $evaluationType."0".$evaluationNumber; } else { $evaluationName = $evaluationType.$evaluationNumber; }
$title = $evaluationType." ".$evaluationNumber.": ".$evaluationTitle;
$headTitle = '_CST_ - '.$courseNumber.' '.$courseTitle.' - '.$title;
$pageTitle = $courseNumber.' '.$courseTitle.'<br>'.$title;
$pageMenu = 'Course/courseMenu.phpinc';
$smallTitle = true;
$thisFile = __FILE__; $thisLine=__LINE__; include('common/pageHeader.phpinc');
$thisFile=__FILE__; $thisLine=__LINE__; include('Login/authenticate.phpinc');
$sectionTitle = $courseNumber.' '.$courseTitle.' - '.$title;
$thisFile = __FILE__; $thisLine=__LINE__; include('common/sectionHeader.phpinc');
?>
<p>
<fieldset><legend><?=$evaluationType?> Assignment</legend><span class="normal">
In this lab you are going to continue using Cascading Style Sheets (CSS). You will demonstrate competence in understanding the effects of position for styles; the use of the external style sheet; and inline styles. You will also use the <b>border</b>, <b>color</b>, <b>margin</b>, and <b>padding</b> property/value pairs.
<br />
Create a <b><?=$evaluationName?></b> folder and keep all files for this lab in that folder.
<br />
Please follow the instructions below to complete this lab.
<br /><br />
<ol>
<li>Create a web page file named <b><?=$evaluationName?>.htm</b>.
<ol type="a">
<li>Specify a <b>DOCTYPE</b> as the very first line in the HTML document.</li>
<li>Insert a comment before the <b>head</b> section containing the text <b><?=$evaluationType?> <?=$evaluationNumber?> - firstname lastname</b> where firstname is your first name and lastname is your last name.</li>
<li>Set character encoding to UTF-8, UTF-16, or another character set of your choice.</li>
<li>Title the page <b><?=$evaluationType?> <?=$evaluationNumber?> - firstname lastname</b> where firstname is your first name and lastname is your last name.</li>
<li>Put an <b>h2</b> heading in the body containing the text <b><?=$evaluationType?> <?=$evaluationNumber?> - firstname lastname</b> where firstname is your first name and lastname is your last name.</li>
</ol>
</li>
<li>Create an internal style in the <b>head</b> section with the following styles:
<ol type="a">
<li>A style id named <b>div1</b> with the following property/value pairs:
<ol type="i">
<li>Solid border that is 2px wide with a color of blue.</li>
<li>Margin of 10px.</li>
<li>Padding of 0px.</li>
</ol>
</li>
<li>A style id named <b>div2</b> with the following property/value pairs:
<ol type="i">
<li>Solid border that is 2px wide with a color of red.</li>
<li>Margin of 10px.</li>
<li>Left margin of 30px.</li>
<li>Right margin of 90px.</li>
</ol>
</li>
</ol>
</li>
<li>Place a div in the body section.
<ol type="a">
<li>Create an inline (local) style for the div with a dashed border that is 2px wide and a color of green.</li>
<li>Place some text in the div.</li>
</ol>
</li>
<li>Place a div inside the above div just after the text (This div is nested inside of the first one).
<ol type="a">
<li>Give this div an id of <b>div1</b>.</li>
<li>Place some text in the div.</li>
</ol>
</li>
<li>Place a div inside the above div just after the text. (This div is nested inside of the second one)
<ol type="a">
<li>Give this div an id of <b>div2</b>.</li>
<li>Place some text in the div.</li>
</ol>
</li>
<br />
<li>Create a style sheet file named <b>import.css</b>.
<ol type="a">
<li>Create a style section for paragraph (<b>p</b>) with the following property/value pair:</li>
<li>Font color of #FF0000 (red).</li>
</ol>
</li>
<br />
<li>Create a style sheet file named <b>link.css</b>.
<ol type="a">
<li>Create a style section for paragraph (<b>p</b>) with the following property/value pair:</li>
<li>Font color of #0000FF (blue).</li>
</ol>
</li>
<br />
<li>Create a style sheet file named <b>print.css</b>.
<ol type="a">
<li>Create a style section for the body (<b>body</b>) with the following property/value pair:</li>
<li>Font color of #FF0000 (red).</li>
<li>Create a style section for paragraph (<b>p</b>) with the following property/value pair:</li>
<li>Font color of #FF00FF (fuchsia).</li>
</ol>
</li>
<br />
<li>Create a web page file named <b><?=$evaluationName?>b.htm</b>.
<ol type="a">
<li>Specify a <b>DOCTYPE</b> as the very first line in the HTML document.</li>
<li>Insert a comment before the <b>head</b> section containing the text <b><?=$evaluationType?> <?=$evaluationNumber?>b - firstname lastname</b> where firstname is your first name and lastname is your last name.</li>
<li>Set character encoding to UTF-8, UTF-16, or another character set of your choice.</li>
<li>Title the page <b><?=$evaluationType?> <?=$evaluationNumber?>b - firstname lastname</b> where firstname is your first name and lastname is your last name.</li>
<li>Put an <b>h2</b> heading in the body containing the text <b><?=$evaluationType?> <?=$evaluationNumber?>b - firstname lastname</b> where firstname is your first name and lastname is your last name.</li>
</ol>
</li>
<li>Create a link to the <b>link.css</b> style sheet.</li> <!-- import, link, then internal -->
<li>Create an import of the <b>import.css</b> style sheet after the style sheet link above.</li>
<li>Create an internal style in the <b>head</b> section after the style sheet import above with the following style:
<ol type="a">
<li>Create a style section for paragraph (<b>p</b>) with the following property/value pair:</li>
<li>Font color of #00FF00 (green).</li>
</ol>
</li>
<li>Place some text in the body section.</li>
<li>Create a paragraph under that with some text in it.</li>
<li>Create a second paragraph under the first with some text in it.</li>
<br />
<li>Copy the file <b><?=$evaluationName?>b.htm</b> to <b><?=$evaluationName?>c.htm</b> and make the following changes: <!-- link, internal, then import -->
<ol type="a">
<li>Change the <b>5b</b> in the comment, title, and h2 element to <b>5c</b>.</li>
<li>Change the order of the import, link, and internal styles so that the link is first, the internal is second, and the import is last.</li>
</ol>
</li>
<br />
<li>Copy the file <b><?=$evaluationName?>c.htm</b> to <b><?=$evaluationName?>d.htm</b> and make the following changes: <!-- internal, import, then link -->
<ol type="a">
<li>Change the <b>5c</b> in the comment, title, and h2 element to <b>5d</b>.</li>
<li>Change the order of the import, link, and internal styles so that the internal is first, the import is second, and the link is last.</li>
</ol>
</li>
<br />
<li>Copy the file <b><?=$evaluationName?>d.htm</b> to <b><?=$evaluationName?>e.htm</b> and make the following changes: <!-- internal, import, then link -->
<ol type="a">
<li>Change the <b>5d</b> in the comment, title, and h2 element to <b>5e</b>.</li>
<li>Create a link to the <b>print.css</b> style sheet below the link to <b>link.css</b> and set the media type to <b>print</b>.</li>
<li>Create an inline (local) style for the first paragraph and set the font color to #FFFF00 (yellow).</li>
</ol>
</li>
<br />
<li>Submit this assignment for evaluation.
<ol type="a">
<li>Zip up the <b><?=$evaluationName?></b> folder into a file called <b><?=$evaluationName?>.zip</b>.</li>
<li>Send the <b><?=$evaluationName?>.zip</b> file as an attachment using email to <b>jim.martinson@ridgewater.edu</b> with a subject of <span style="white-space:nowrap;"><b><?=$courseNumber?> <?=$evaluationName?> submission</b></span>.</li>
<li>If you are not using Ridgewater's email system then enter your name as the first line of the message.</li>
</ol>
</li>
</ol>
<br />
Even though you have previously used CSS it is a complex language with many options.<br />
As an aid the property/value pairs that were used to complete the examples for this assignment are listed below:<br />
border:2px dashed green;<br />
border:2px solid blue;<br />
border:2px solid red;<br />
color:#0000FF;<br />
color:#00FF00;<br />
color:#FF0000;<br />
color:#FF00FF;<br />
color:#FFFF00;<br />
margin-left:30px;<br />
margin-right:90px;<br />
margin:10px;<br />
margin:10px;<br />
padding:0px;<br />
These property/value pairs are listed in alphabetical order and do not include the <i>selectors</i> which determine which elements are affected by a style rule declaration. Also, these are not the only solutions. For instance, <b>color:#FF00FF;</b> could have been <b>color:fuchsia;</b>, etc.
</span></fieldset>
<fieldset><legend>Example <span class="normal">- Your result should look similar to the page below:</span></legend>
<p>
<?=$evaluationName?>.htm Example:<br />
<img src="<?=$evaluationName?>.jpg" alt="<?=$evaluationName?> Example" />
</p>
<p>
<?=$evaluationName?>b.htm Example:<br />
<img src="<?=$evaluationName?>b.jpg" alt="<?=$evaluationName?>a Example" />
</p>
<p>
<?=$evaluationName?>c.htm Example:<br />
<img src="<?=$evaluationName?>c.jpg" alt="<?=$evaluationName?>b Example" />
</p>
<p>
<?=$evaluationName?>d.htm Example:<br />
<img src="<?=$evaluationName?>d.jpg" alt="<?=$evaluationName?>b Example" />
</p>
<p>
<?=$evaluationName?>e.htm Example:<br />
<img src="<?=$evaluationName?>e.jpg" alt="<?=$evaluationName?>b Example" />
</p>
<p>
<?=$evaluationName?>e.htm Print Example:<br />
<img src="<?=$evaluationName?>ePrint.jpg" alt="<?=$evaluationName?>b Example" style="border:1px solid #CCCCCC;" />
</p>
</fieldset>
<fieldset><legend>Notes</legend><span class="normal">
Take note of the following:
<ol>
<li>The left and right margin styles in <?=$evaluationName?>.htm override the first.</li>
<li>The styles (import.css, link.css, internal) override each other depending on position.</li>
<li>How inline (local) styles always have precedence (because they are parsed last).</li>
<li>How the print.css style sheet changes the output when Lab5e.htm is printed (but not for inline styles).</li>
</ol>
</span></fieldset>
<fieldset><legend>Grading Criteria</legend><span class="normal">
Demonstrated assignment effectively: 10 points.
<br />
There are some things I expect. If they are incorrect you will lose the following:
<br />
Incorrect attachment file name: -1 pt.
<br />
Work submitted incorrectly: -1pt.
<br />
Incorrect subject in email: -1pt.
<br />
Second and subsequent submission of work for grading: -1pt.
<br />
Work submitted late: -1pt.
</span></fieldset>
<?
$thisFile=__FILE__; $thisLine=__LINE__; include('ReferencesResources.phpinc');
$thisFile = __FILE__; $thisLine=__LINE__; include('common/sectionFooter.phpinc');
$thisFile = __FILE__; $thisLine=__LINE__; include('common/pageFooter.phpinc');
?>