Homework 6 due Fri Nov 9

[ghbondar]

Homework 6: Continue to improve one or both of your web pages: 1) First, use class and id attributes to organize the content of your HTML by classifying related elements and identifying specific elements:
class-attributes: different kinds of elements can be coded with the same value of class:
<element class="something">text text text</element> id-attributes: the value of each id-attribute can only be used once in each file:
<element id="chapter34">text text text</element> 2) Then, use your CSS to style some of the elements that have these attributes. In your CSS file: A class-attribute is identified by a dot: .something { CSS rule set goes here } An id-attribute is identified by a hash: #chapter34 { CSS rule set goes here } 3) Use your id-attributes to add internal links to your HTML-file so that you can jump around inside your HTML, such as from the bottom back to the beginning, or you can create something like a table of contents or index to your file. For example, on your Homepage (index.html), you can create an guide to the sections on your Resume (resume.html). Assuming that each part of your Resume contains an id-attribute, you can link to them using anchor-tags in your HTML-file to jump to that part of your document:

<a href="resume.html#education">Education</a>
<a href="resume.html#workExperience">Work Experience</a>
<a href="#top">Return to the top of this page.</a>

4) ALSO: make sure that all of your images are styled using your external CSS: NO! <img src="eclipse.jpg" alt="Lunar eclipse photos" height="42" width="42"/>
YES! <img src="eclipse.jpg" alt="Lunar eclipse photos" id="eclipse" class="image"/>
then use the id or class attribute-values to select the image in your CSS-file and set its dimensions in a CSS rule set, such as:

#eclipse {
height: 42px;
}

or

.image {
width: 30%;
}

5) As usual: a) make sure that there is no internal or in-line CSS in your HTML files. b) use comments in both HTML and CSS, with initials and date, to indicate your modifications: <!-- ghb 2018-10-31: This is a comment in an HTML file --> /* ghb 2018-10-31: This is a comment in a CSS file*/ c) after uploading to web space, check to see if your HTML and CSS are valid using the validator sites: Validate your HTML: https://validator.w3.org/ Validate your CSS: http://jigsaw.w3.org/css-validator/ d) push all content to your personal Github repos and to your webspace.

[KhuongNgx]

http://newtfire.org/~khn5/

[Jazour11]

http://newtfire.org/~jaz66/