| 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/Classes/CST1021/Labs/ |
Upload File : |
Lab 4 - Images
Criteria Points
Correct DOCTYPE, html, head, title, meta charset, body, and h1 tags. 4
First image with alt. 2
Correct horizontal rule. 2
Correct aligned images with text. 4
Correct <br class="clear_both"> and edited collage image. 4
HTML is well formatted and follows lab requirements. 4
Do not add any additional code or styling other than what is required by the lab.
You should also not have any errors when your html and css are validated.
I will deduct points for these also.
Total: 20
-1 Work submitted incorrectly.
Your files were not contained in a Lab04 folder.
-2 Work submitted incorrectly.
Your Lab04.css file is misnamed `Lab04 (1).css`.
Because of this it is not loaded by the link tag.
You will also need to change the href in your AbdumalikSalah_Lab04.html link tag.
-2 Work submitted incorrectly.
Your JeffreyVolby_Lab04.html file is misnamed `JeffreyVolby_Lab04.html.html`.
-1 Work submitted incorrectly.
Your zip file contains an additional file not required by this lab.
-1 Work submitted incorrectly.
Your zip file contains additional files not required by this lab.
-1 Work submitted incorrectly.
Your Lab04 folder is mis-named `lab 04`.
-1 Work submitted incorrectly.
Your Lab04 folder is mis-named `Lab004`.
-0 Work submitted incorrectly.
Your Lab04 folder is mis-named `Lab04 Fix)`.
If you are keeping your old work, rename the old work folder instead.
-2.5 Work submitted late.
-25 You did not submit your Lab04.css file in the submission.
Your JeffreyVolby_Lab04.html file was also mis-named `CST1021_JeffreyVolby_Lab04.html`.
=e
Lab04.css:
-25 The CSS Validation Service at https://jigsaw.w3.org/css-validator/validator.html.en reported errors.
You really must validate your css before submitting your assignment.
=e
Lab04.css:
OK.
-4 You styled all images to float left. Because of this the rest of the page floats up beside the first image.
The first image should be centered. See Step 4;4.
The final image should not be floated.
-2 You styled all images to center.
Your float css fixes the second and third images. But the last image you floated left.
This was not required by the lab. I do not want the last image floated.
Try only applying you centering css to the first image by using an id or class.
-2 Your Lab04.css file is missing. Instead you have a Lab04 file without the .css extension.
-2 Your Lab04.css file contains html, not css.
-1 You have set an incorrect width for your Step 6 images in the css (lines 20 and 25).
-1 Line 8; You styled your hr element at `width: 60%;` not `half way across the page` (50%).
-0 You set a lot of style declarations for the hr element that were not required by the lab.
Some of them are also the default settings for an hr element. No errors though.
I like the idea of styling it here!
-0 Line 10; `align-self` has no effect on block elements.
It is for use with flex or grid elements.
Lab04.html:
-25 The Markup Validation Service at https://validator.w3.org/ reported errors.
You really must validate your html before submitting your assignment.
=e
-25 Your images are not using a local src.
=e
-0 The DOCTYPE tag should have 'DOCTYPE' in all upper case.
-0 Line 12; css declarations should end with a ;.
-0 Lines 14,18; css declarations should end with a ;.
head
-1 Line 8; your type attribute does not have an = sign before the value.
-2 You are missing the entire head section of the page and have no meta or link as required by Step 3;
-0 Step 5; Line 9; An hr element begins with left and right margins set to auto.
So the css `margin` declarations do nothing.
I like the idea of styling the hr tag width with a declaration here.
This could have been placed in the external style sheet.
-1 Line 7; You styled all images to be centered.
This centers the collage.jpg as well. It should not be centered.
Try selecting a class or id and then setting the class or id for the first image.
-1 You are missing the stop head tag.
-1 You are missing the body tag.
Step 3; h1
-1 Step 3; Missing h1 tag.
-1 Step 3; Line 12; The align attribute is not supported in HTML 5. Use css instead. Look up css text-align.
-1 Step 3; Line 15; The CSS align-content property is only for use with flex containers. <hr> elements are already centered by the browser user agent css.
-1 Step 3; Line 9; The width attribute is not supported in HTML 5. Use css instead. Look up css width.
-1 Step 3; Line 11; The center tag is not supported in HTML 5. Use css instead. Look up css text-align.
-0 Step 3; Line 12; An h1 is an empty element.
It does not contain content so the 'text-align' declaration does nothing.
-0 Step 3; The inline style for `text-align:center` is not needed.
The h1 element was styled `text-align:center` in the external css file.
Step 4; first image
-3 Step 4; The image is a jpg file with a .jfif extension.
-3 Step 4; The image is a bmp file with a .jpg extension.
-3 Step 4; The image is a wepp file with a .jpg extension.
-3 Step 4; Line 12; The image is a .jpg file with a .png extension.
Either rename the file with the correct extension or convert it to png format.
-3 Step 4; Line 13; The image is a webp format file with a .png extension.
Either rename the file with the correct extension or convert it to png format.
-1 Step 4; The class value should be enclosed in quotes.
-1 Step 4; The center tag is not supported in HTML 5. See step 4 for a way to center the image.
-2 Step 4; Line 17; The image must have height and width set using css or height and width attributes.
-2 Step 4; Your image is not centered.
-1 Step 4; The height is not the correct value for your image.
-1 Step 4; The width is not the correct value for your image.
-3 Step 4; Line 12; The height and width attribute values are incorrect.
The image is not displayed at its true size.
The image is also too large. If you need help resizing the image please call me.
-2 Step 4; The width and height attribute values are not the correct values for your image.
-1 Step 4; Line 10. The height attribute value is not the correct value for your image.
-2 Step 4; Line 33; The CSS width and height values are not the correct values for your image.
The image is also too large.
-1 Step 4; Because your style attribute sets the width to 50% your image is not displayed at its true size.
-1 Step 4; The image should have the height attribute set.
-2 Step 4; The image must have the height and width set using css or height and width attributes.
-1 Step 4.2; Your image is too large.
-0 Step 4; Line 11; The href of the image does not have the same capitalization as the file name.
-0 Line 15; There should be no spaces between the attribute, the = sign, and the value.
Step 5. first hr
-3 Step 5; You are missing the hr tag required by this step.
-2 Step 5; Lines 16-17; You did not place the style value in quotes. Because of this the style was not applied.
Also, the border declaration does nothing, and the tag should be written on one line.
-1 Step 5; Line 21; The align attribute is not supported in HTML 5. The hr element is centered by default.
-1 Step 5; Line 21; The width attribute is not supported in HTML 5. Use css instead. Look up css width.
-1 Step 5; Line 18; The hr is not styled at 50% of the page width. Use css. Look up css width.
-1 Step 5; Line 11; The hr is not styled at 50% of the page width.
-1 Step 5; Line 17; You have a second hr tag.
-0 Step 5; Line 14; An h1 element begins with left and right margins set to auto.
So the css 'margin' declarations do nothing.
-0 Step 5; Line 12; An hr is an empty element.
It does not contain content so the 'text-align' declaration does nothing.
Step 6; two images
-2 Step 6; Your images and text should not be enclosed in an article or any other element.
-5 Step 6; Your second and third images are not next to each other in the code.
-3 Step 6; Line 14; The image is a bmp format image with a .jpg extension on the filename.
-3 Step 6; Line 14; The image is a jpg format image with a .jfif extension on the filename.
-3 Step 6; Line 14; The image is a jpg format image with a .png extension on the filename.
Either rename the file with the correct extension or convert it to png format.
-5 Step 6; You placed your images in div elements.
-5 Step 6; You placed your images in p elements..
-2 Step 6; line 20; The image is actually a .png format image. You have a .jpg extension on the filename.
-2 Step 6; line 20; The image is actually a .jpg format image. You have a .png extension on the filename.
-2 Step 6; line 38; The image is too large. Use an editor like IrfanView to reduce the image size.
-2 Step 6; line 20; The height attribute value is incorrect. The image is not displayed at its true size.
-3 Step 6; line 17; The height and width attribute values are incorrect.
The image is not displayed at its true size.
The image is also too large. Either resize the image or replace it with one that is smaller.
-2 Step 6; line 20; The height is incorrect. You did not set the width. The image is not displayed at its true size.
-1 Step 6; Line 11. The height attribute value is not the correct value for your image.
-1 Step 6; Line 11. The width attribute value is not the correct value for your image.
-2 Step 6; Line 38; The CSS width and height values are not the correct values for your image.
The image is not displayed at its true size.
The image is also too large. Either resize the image or replace it with one that is smaller.
-1 Step 6; The align attribute is not supported in HTML 5. Use css instead. Look up css float.
-2 Step 6; Line 14; You did not set the image height.
-2 Step 6; Line 15; You did not set the image height.
-2 Step 6; Line 14; The image must have the height and width set using css or height and width attributes.
-2 Step 6; Line 15; The image must have the height and width set using css or height and width attributes.
-2 Step 6; Line 16; The width and height attribute values for the image are not the correct values.
The image is also too large.
-0 Step 6; You placed the images in a div element not required by the lab.
You could set the class for the images instead and remove the divs.
-0 Step 6; You placed the images and text in an article element not required by the lab.
-0 Step 6; Line 16; The href of the image does not have the same capitalization as the file name.
Step 7. text
-3 Step 7; You are missing the text required by this step.
-2 Step 7; You have text between the two images, not just after them as required.
-2 Step 7; You have the text required but it does not flow around the images as required.
This is because of your br tag of class clear_both on line 15.
-2 Step 7; The text does not flow around the images as required.
This is because you have styled the images as `display: block`.
-2 You have an hr tag between your second and third images.
Step 8; second hr
-3 Step 8; You are missing the hr tag required by this step.
-1 Step 8; Line 41; The hr is not styled at 50% of the page width.
-1 Step 8; line 23; The hr is not centered as required.
This is because you placed it in a div at 50% width.
Div elements, unlike hr elements, are not centered by default.
-1 Step 8; line 25; The hr tag does not go half way across the page as required.
-3 Step 8; Line 25; The hr tag does not stay below the images if the text does not extend below them.
You can see this if the page is wide enough or you remove some of the text.
Try searching for 'css clear' to get this to work. There is a clear_both class in the external style sheet.
-3 Step 8; Line 23; The hr tag does not stay below the images if you remove the div margin-top.
You can see this if you remove the margin-top. What would happen if the images were taller?
I would remove the div entirely and style the hr tag.
Try searching for 'css clear' to get this to work. There is a clear_both class in the external style sheet.
-0 Step 8; You could have used the class attribute as suggested.
-0 Step 8; Line 21; An h1 is an empty element.
It does not contain content so the 'text-align' declaration does nothing.
-0 Step 8; Line 22; An h1 element begins with left and right margins set to auto.
So the css 'margin' declarations do nothing.
-0 Step 8; Line 20; An hr is an empty element.
It does not contain content so the 'text-align' declaration does nothing.
Step 9; collage.jpg
width=232 height=155
-1 Step 9; Your submission does not include the original collage.bmp file.
-5 Step 9; Incorrect image.
Height and width are not set.
The image was edited instead of just being rotated right.
It is a bmp format image with a .jpeg extension. It should be a .jpg.
-5 Step 9; You did not include the modified collage.jpg file.
-5 Step 9; You did not use the collage.bmp file as required for this step.
-1 Step 9.1.1; The image is not rotated correctly.
-2 Step 9.1.2; The image is not resized correctly.
The original image was 464px high and 310px wide. Half of that is 232px by 155px.
-2 Step 9.1.3; The collage.jpg image is still a bmp format image.
It just has a .jpg extension. You must convert it to jpg format.
-1 Step 9; The image file does not have the correct name. It should be named collage.jpg.
While doing this with css was clever, the instructions stated to edit the image.
-1 Step 9; line 27; The image is a gif image, not a jpg image as required.
-2 Step 9.1.3; The collage.jpg image is still a bmp format image. You just have a .jpg extension.
-1 Step 9; Line 22; Attributes cannot be in []s. Also, the class value should not have the '.' before the name.
-2 Step 9; The image must have the height and width set using css or height and width attributes.
-1 Step 9; Line 22; The value for the alt attribute must be enclosed in quotes.
-1 Step 9; Line 36; The image is not rotated correctly.
It must be done with an editor, not with css.
You also rotated the collage.bmp file.
-1 Step 9; Line 36; The image is not rotated to the right as required.
-1 Step 9; Line 25; The filename if the image is incorrect.
-1 Step 9; Line 31; The image should not be centered.
-2 Step 9.2; You did not put/display the image in your html.
-1 Step 9; line 29; The height and width attribute values are incorrect.
The image is not displayed at its true size.
-1 Step 9; You added a border to the rotated image.
If you need help with your images please call me.
-2 Step 6; Billie.png is actually a jpg format image with a .png extension.
-1 You are missing the stop body tag. While the validator allows this, I do not.
-1 You are missing the stop html tag. While the validator allows this, I do not.
Step 10; Turn in your assignment
-1 Step 10.1; You are missing the collage.bmp file in your submission.
-1 Your code is hard to read without any indenting. Try indenting the tags in the head section in the future.
-1 Your code indenting is uneven; This makes it hard to read.
+1 Your code is beautiful. The formatting in the document makes it very easy to read.
I am giving you a point back because of this.
+1 The formatting in the document makes it very easy to read.
I am giving you a point back because of this.
Your code is not only correct, but beautiful besides. I wish it was possible to give you extra points.
Good job.
Please pay better attention to the lab instructions and try not to add additional styling or html not required. It changes the way the page is rendered by the browser and makes it harder for me to grade.
Since your previous score was 15 points, that is your grade.
xx points. This is a final grade for this lab.