Students learn to manipulate HTML using CSS.
In this section students are exposed to the concept of Cascading Style Sheets (CSS), and how they can be used to manage the look at feel of an entire website. Students will make changes to their resume document by manipulating HTML, and then the teacher will demonstrate how to manipulate the resume using a CSS file, after which the students will apply the simple CSS changes to their resume. The benefit of using CSS is to more easily make changes to the whole resume by changing just one element in the CSS file. Since the resume will be a "living document" that students will continue to work with, you may want to give students the option to continue to use CSS, or they can go back to the old way which is less effective but easier to understand.
The teacher should also note that the IDT standard is CSS exposure, not practice, so activities 3, 4, and 5 go beyond what is required in the IDT standards.
The tricky part of this will be to make sure students can access the CSS file from their HTML resume, and for the students and teacher to be able to switch back and forth between the CSS file and the HTML file. The teacher should practice the CSS sections before doing the demo for the students to work out any glitches.
Notepad seems to default to saving files as ".txt" when you click "Save" which won't work for this. When saving from Notepad, the file extension needs to be save as ".html" or ".css" as appropriate. To do this, the "Save as type" drop down in the save-as window needs to be changed to "All files" and the file extension needs to be fully specified in the name of the file e.g. "myResume.html" and "myResumeCSS.css" and NOT "myResume" an "myResumeCSS". Alternatively (and easier), click on the file in the file list to save over it.
Activity 1 (Budget 10 minutes)
Students make changes to all of their resume headers.
1. Students change the font color of ALL of their headers in their resume to red, by adding style="color:red" inside all of the <div> tags for their headers. It should look like this: <div align="center" style="color:red">. That doesn't look great, so then ask the students change the color to something else. Tedious, right?
The objective of this exercise is to get students to realize that in order to change their headers they have to change each line of code individually. There is a more efficient way of doing this.
Activity 2 (Budget 15 minutes)
Teacher introduces the concept of a Cascading Style Sheet (CSS) and provides an example of its use.
1. The teacher introduces the concept of a CSS (Cascading Style Sheet) for formatting the resume (or any web page). A CSS file allows us to make the change in one place in the CSS file, to update the style and format of all similar elements in on a page. Even better, we can change the style and format of any pages that references the style sheet! So you can update an entire website with one change.
2. The teacher reviews this simple CSS file (myResumeCSS1.css) that introduces the CLASS "heading" and changes the text color of anything with that CLASS to red. Key features for defining a class are the "." preceding the name of the class, the name of the class ("heading"), and the opening and closing brackets "{" "}". Each feature that we wish to define for the class has its own line, followed by a semi-colon ";". In this case, the only feature we are changing is the "color:blue;".
3. The teacher shows how to include the CSS file in the website, using the <link> tag, which we will add to this simple Maria Gonzalez resume example that we have.
<link href="myResumeCSS1.css" rel="stylesheet" type="text/css">
IMPORTANT for this example to work CSS file (myResumeCSS1.css) must be in the same folder as the HTML document.
The teacher shows how to add the class to the appropriate <div>, in this case it should look as follows:
<div class = "heading" align="center">
This updated resume file shows what the final example resume should look like.
Activity 3 (Budget 20 minutes)
Students create a CSS file and link it to their resume.
1. Students create their own CSS file "myResumeCSS.css" and create the ".heading" class. They should choose whatever color they most like. Make sure the students save their CSS file in the same folder as their HTML resume.
2. Students link the CSS file to their resume by adding the <link> tag to their HTML document (it should be the second line of their code). <link href="myResumeCSS.css" rel="stylesheet" type="text/css">
3, Students add the class="heading" to all of their <div> tags around all of their headings, removing the "color:red" from the <div> tag. Their <div> tags should all look this way: <div class = "heading" align="center">
4. Students inspect their new resume document and troubleshoot if it doesn't look right. The teacher should be prepared to help students troubleshoot.
Activity 4 (Budget 10 minutes)
The teacher demonstrates how HTML can be simplified using CSS.
1. The teacher shows how we can simplify the resume HTML code by removing the bold <b></b> and <align="center"> tags from the resume headings, and include them in the CSS file. This will make the resume easier to manage going forward. The teacher should remove the <b></b> and <align="center"> tags in front of the class, and then look at the resume to show that the changes have affected it.
2. The teacher will then extends the CSS "heading" class to include "text-align: center;" and "font-weight: bold;". After saving the new CSS file as myResumeCSS1.css, the teacher clicks on the refresh button for the resume webpage, which should now look like it did previously. The advanced CSS file shows what this should look like (note, the color was changed to blue for this example so that a change is apparent,and the CSS file name has a "2" in it, which is updated in the <link> associated with the advanced resume page that will display it.
Activity 5 (Budget 20 minutes)
Students update their resumes by cleaning up their HTML and using more sophisticated CSS.
1. The students update their resumes with the new CSS file, and clean up their HTML by removing the <b></b> tags and "align="center" from the <div> tags in their HTML. Students should make sure their resume still looks the same.
2. Advanced students can look at other formatting options for the headers, and other portions of their resume. W3 schools provides a good reference https://www.w3schools.com/css/default.asp for what is possible. They should be encouraged to change backgrounds and play with formatting. By having advanced students create more interesting versions of their resume, it may encourage others.