Fri, 2010-03-12 17:00
Hi,
I placed this code in the validator and it comes up with so many errors that I don't understand, like
"Line 132, Column 10: document type does not allow element "p" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag
"Grade category" - If you have exist…"
I don't see in my page why there are any problems (I only have a problem with the footer that I will ask about in another post). I'd like to fix these if I need to. But, are there some errors like these that don't really matter.
René
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Moodle Assignments: Adding Adv Uploading Assignments</title> <link href="CSS/template3layout.css" rel="stylesheet" type="text/css" /></head> <!--PROXIMITY: Add one line break after each image, two line breaks before each black subtitle, and two before each red subtitle --> <body> <div id="wrapper"> <div id="wouheader"><a href="http://www.wou.edu"><img src="Images/woulogo.jpg" width="204" height="21" alt="woulogo" /></a></div> <div id="pawsheaderwrap"> <div class="blackhorizstrip"></div> <div id="pawsheader"><a href="http://pawsonline.wou.edu"><img src="Images/PAWSHeaderSmaller.jpg" width="500" height="46" alt="pawslogo" /></a></div> <div class="blackhorizstrip"></div> </div> <div id="bodycontent"> <div id="bodyheader">HOW TO: Moodle Assignments - Adding "Advanced Uploading of Files"</div> <p>This is the most widely used of assignments types. It allows each student to upload one or more files in any format. Read other features of this tool here.</p> <p>(<em>For a quickstart to adding an assignment, you need only complete the<img src="/Development/rebuild/Images/WOU_pawprintIcon.png" alt="pawprint" width="14" height="19" /> items in the "Set-up" section below.</em>)</p> <div class="blackbodysubtitle">Add Tool:</div> <ul> <li>Click on <span class="redbodytext">[Turn editing on]</span> (upper right of Front Page).</li> </ul> <ul> <p><img src="Images/turnEdittingOn.jpg" width="249" height="48" alt="editingOn" /></p> <br></br> </ul> <ul> <li>Determine which middle section block (topic, module, or week) of your <a href="#frontpage">Front Page</a> you want to add the assignment link to. Select the <span class="redbodytext">[Add an activity] </span>from the drop down menu within that block.</li> </ul> <ul> <p><img src="Images/addanactivityORresource copy.jpg" width="181" height="34" alt="addAnActivity" /></p> <br></br> </ul> <ul> <li>Under "<strong>Assignments</strong>" select “<span class="redbodytext">Advanced uploading of files</span>”</li> </ul> <ul> <p><img src="Images/addAnActivityPop.jpg" width="177" height="134" alt="add" /></p> <br></br> </ul> <p>On the “<strong>Adding a new Assignment</strong>” set-up page, the following options are available:</p> <p class="redbodysubtitle"><span class="blackbodysubtitle">Set-Up:</span></p> <div class="redbodysubtitle">General Section</div> <br></br> <p><span class="redbodytext">"Assignment Name" </span><img src="/Development/rebuild/Images/WOU_pawprintIcon.png" alt="pawprint" width="14" height="19" /> - Enter a name for the assignment. <p><span class="redbodytext">"</span><span class="redbodytext">Description</span><span class="redbodytext">"</span> <img src="/Development/rebuild/Images/WOU_pawprintIcon.png" alt="pawprint" width="14" height="19" /> - Enter a description for the assignment. This is the best place to enter instructions for students regarding items such as: <ul> <li>requirements of the assignment </li> <li>content form/format/file type in which it should be submitted</li> <li>grading criteria</li> </ul> <p><span class="redbodytext">"Grade"</span> <img src="/Development/rebuild/Images/WOU_pawprintIcon.png" alt="pawprint" width="14" height="19" /> - Enter the grade for the assignment from the drop-down menu. This will become the maximum grade for the assignment. You can also choose a qualitative grade scale or custom scales, or, if the assignment will not be graded, select “No Grade.”</p> <p><span class="redbodytext">"Available from"</span> - Select the date for the assignment to be available from the drop-down menu. If the date is grayed out, uncheck the box labeled Disable by the date.</p> <p><span class="redbodytext">"Due Date"</span> - Select the availability date for the assignment from the drop-down menus. (If the date is grayed out, uncheck the box labeled “Disable by the date.”)</p> <p><span class="redbodytext">"Prevent late submissions"</span></p> <ul> <li> <strong>"No"</strong> = assignments submitted after the due date will be marked as late, but students will still be able to submit them.</li> <li><strong>"Yes"</strong> = assignment submission will be blocked after the due date.</li> </ul> </p> <p class="redbodysubtitle"><span class="blackbodysubtitle">Set-Up:</span></p> <div class="redbodysubtitle">Advanced uploading of files</div> <br></br> <p><span class="redbodytext">"Maximum size"</span> - defines the maximum size of the file a student will be permitted to upload. (The choices available are governed by the maximum file size selected in the [Settings] area of the “Administration” block. Currently, WOU’s server limit is 100MB.)</p> <p><span class="redbodytext">"Allow deleting"</span> - Selecting "<strong>Yes</strong>" will enable students to delete uploaded files at any time before submitting for grading.</p> <p><span class="redbodytext">"Maximum number of uploaded files"</span> - sets the maximum number of files each students may upload. (This number is not shown to students. It is considered a best practice to remind students of the actual number of requested files in the assignment description.)</p> <p><span class="redbodytext">"Allow notes"</span> - Using this option permits students to enter notes into a text area associated with the assignment. This can be used as a means for students to communicate with the instructor over the specific assignment.</p> <p><span class="redbodytext">"Hide description before available date"</span>” - When enabled, the assignment description is hidden until the specified date.</p> <p><span class="redbodytext">"E-mail alerts to teachers"</span> - Instructors can choose to have e-mail alerts sent to them whenever students add or update an assignment submission. </p> <p><span class="redbodytext">"Enable Send for marking"</span> - This option will allow the student to submit the assignment for grading. After the assignment is sent for marking, it can no longer be changed, unless the instructor chooses to revert the assignment to draft status. Before sending, a student may either choose or be required to keep drafts of the assignment online.</p> <p class="redbodysubtitle"><span class="blackbodysubtitle">Set-Up:</span></p> <div class="redbodysubtitle">Common module settings</div> <br></br> <p><span class="redbodytext">"Grade mode"</span> - If you have set the course to use groups, this is the area used to associate the assignment with a group.</p> <ul> <li><strong>No group</strong> = There are no groups, and all students submit their assignments in one assignment area. </li> <li><strong>Separate groups</strong> = Students submit their assignments within a separate group-based submission area (instructors can sort submissions by Group or view All Participants)</li> <li><strong>Visible group</strong> = All students submit their assignment within a single assignment area, but may choose which group to associate their submission with before uploading. (Instructors can sort submissions by Group or view All Participants.)</li> </ul> <p><span class="redbodytext">"Visible"</span> - Choose to Show or Hide the assignment</p> <p><span class="redbodytext">"ID number"</span> - You can give an assignment and an ID number as a means of identifying the assignment for grade calculation purposes. Leave the ID number blank if the activity is not included in any grade calculation.</p> <p><span class="redbodytext">"Grade category"</span> - If you have existing categories in your gradebook, you can select the category you want the assignment in, and it will be placed in that category automatically when the assignment is created.</p> </div> <div class="linkbox" id="footermore"> <div id="footername">MORE:</div> <div id="footerlinkbox">MOODLE</div> <div id="footerlinkbox">Advanced Uploading of Files</div> </div> <div class="linkbox" id="footermore"> <div id="footername">COMING SOON:</div> <div id="footerlinkbox">Grading Assignments</div> </div> </div> </body> </html>
Fri, 2010-03-12 17:05
#1
Chunks of code like <ul>
Chunks of code like
<ul> <p><img src="Images/addanactivityORresource copy.jpg" width="181" height="34" alt="addAnActivity" /></p> <br></br> </ul> <ul> <li>Under "<strong>Assignments</strong>" select “<span class="redbodytext">Advanced uploading of files</span>”</li> </ul> <ul> <p><img src="Images/addAnActivityPop.jpg" width="177" height="134" alt="add" /></p> <br></br> </ul>
Are you biggest issue. You are starting an unordered list, the only element that can be a direct child is an li. Put the paragraph tags inside of an li and remove the br's. Use margin or padding in your CSS.
Fri, 2010-03-12 18:01
#2
So like this? <ul>
So like this?
<ul> <li> <p><img src="Images/addanactivityORresource copy.jpg" width="181" height="34" alt="addAnActivity" /></p> <br></br> </li> </ul>
The only problem with going with pads or margins for the images, is that sometimes there shouldn't be a space after an image (example, when another image follows it.} So I thought just putting a br after the image when I need it, was the cleanest and easiest solution? Would it still be?
René
Fri, 2010-03-12 18:13
#3
<br></br> invalid. should
<br></br>
invalid. should be
<br />And the br tag should not be used in this fashion. I wouldnt even put the image inside paragraph tags, just style the img tag itself if you need too. margins would be the best and easiest thing to manage the space.
First basic few steps in building a webpage
1. Gather and collect content.
2. Organize the content into meaningful semantic valid HTML
3. Design the prototype
4. Style using CSS