| 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 : |
<?
// Lab06.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 = 9;
$assignmentType = "Lesson";
$assignmentTitle = "Defining Selectors";
$evaluationNumber = 6;
$evaluationType = "Lab";
$evaluationTitle = "Defining Selectors";
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 use of selectors. You will use element, class (name), id, context, part, state, and attribute selectors.
<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>In the head of <b><?=$evaluationName?>.htm</b> place a style link to the <?=$evaluationName?>.css file</li>
<li>In the body of <b><?=$evaluationName?>.htm</b> place the following:
<ol type="a">
<li>A line of text with the following:
<ol type="i">
<li>Enter some text.</li>
<li>Enter some emphasis (<b>em</b>) text that also has some bold (<b>b</b>) text in it as well.</li>
<li>Enter some more emphasis text using another tag.</li>
<li>Enter some bold text that is after, not in the emphasis text.</li>
<li>Enter some more bold text using another tag.</li>
</ol>
</li>
<li>A paragraph with a copy of the line above in it. You may change the text if you wish.</li>
<li>Copy the above paragraph and set the class to <b>faded</b>. You may change the text if you wish.</li>
<li>A div with the following:
<ol type="i">
<li>A copy of the first paragraph. You may change the text if you wish.</li>
<li>A second copy of the first paragraph. You may change the text if you wish.</li>
<li>A copy of the second (<b>faded</b>) paragraph. You may change the text if you wish.</li>
<li>A copy of the first line of text (not in a paragraph). You may change the text if you wish.</li>
</ol>
</li>
<li>Copy the above div and set the id to <b>accent</b>. You may change the text if you wish.</li>
<li>Create a link to the CST website (http://cst.ridgewater.edu).</li>
</ol>
</li>
<br />
<li>Create a style sheet file named <?=$evaluationName?>.css.
<ol type="a">
<li>Create a style selection for emphasis (<b>em</b>) with the following property/value pairs:
<ol type="i">
<li>Background color black.</li>
<li>Font color white.</li>
<li>Padding of 0.25em.</li>
</ol>
</li>
<li>Create a style section ancestor of the <b>em</b> selector above for bold (<b>b</b>) with the following property/value pairs:
<ol type="i">
<li>Font color yellow.</li>
<li>Font size larger.</li>
</ol>
</li>
<li>Create a style section for the first-letter part of a paragraph with the following property/value pairs:
<ol type="i">
<li>Font size of larger.</li>
<li>Font weight of bold.</li>
<li>Text decoration of underline.</li>
</ol>
</li>
<li>Create a style section for paragraph for a class of <b>faded</b> with the following property/value pairs:
<ol type="i">
<li>Font color of silver.</li>
<li>Font size of small.</li>
</ol>
</li>
<li>Create a style section ancestor of the class <b>faded</b> above for <b>em</b> with the following property/value pairs:
<ol type="i">
<li>Background color silver.</li>
<li>Font variant of small-caps.</li>
</ol>
</li>
<li>Create a style selection for div with the following property/value pairs:
<ol type="i">
<li>Solid border that is 1px wide with a color of silver.</li>
<li>Margin of 5px;.</li>
<li>Padding of 0.1em.</li>
</ol>
</li>
<li>Create a style selection for div and a first-child for paragraph with the following property/value pair:
<ol type="i">
<li>Font color of green.</li>
</ol>
</li>
<li>Create a style selection for div and a parent for emphasis with the following property/value pair:
<ol type="i">
<li>Text decoration of overline.</li>
</ol>
</li>
<li>Create a style selection for div of id <b>accent</b> with the following property/value pair:
<ol type="i">
<li>Font color of red.</li>
</ol>
</li>
<li>Create a style section for div of id <b>accent</b> with a sibling of emphasis for bold with the following property/value pair:
<ol type="i">
<li>Font color of #00ff00.</li>
</ol>
</li>
<li>Create a style section for anchor <b>a</b> with the following property/value pairs:
<ol type="i">
<li>Font color of blue.</li>
<li>Font weight of bold.</li>
</ol>
</li>
<li>Create a style section group for anchor of state focus and anchor of state hover with the following property/value pairs:
<ol type="i">
<li>Font color of red.</li>
<li>Text decoration of none.</li>
</ol>
</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 />
background-color:#000000;<br>
background-color:silver;<br>
border:1px solid silver;<br>
color:#00FF00;<br>
color:#FF0000;<br>
color:#FFFFFF;<br>
color:blue;<br>
color:green;<br>
color:red;<br>
color:silver;<br>
color:yellow;<br>
font-size:larger;<br>
font-size:small;<br>
font-variant:small-caps;<br>
font-weight:bold;<br>
margin:5px;<br>
padding:0.1em;<br>
padding:0.25em;<br>
text-decoration:none;<br>
text-decoration:overline;<br>
text-decoration:underline;<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:#FF0000;</b> could have been <b>color:red;</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>
</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');
?>