Calisthenics 3Finding the Errors
Looking at the following samples of HTML and CSS code, you will try to find all the errors you can find.
Create an unstyled Web page to list the errors you found in both the HTML and the CSS code in Part 1 and Part 2 below. The list should include the line number for the error along with a description of the error.
For example, it can read something like this:
Part 1 -- HTML Errors:
Line 5: Missing closing bracket
Line 6: Missing quote after the word "page"
(The ones above are examples and do not represent the actual code shown below.)
Part 1 -- Preparation
- Create a new HTML file and save this Web page as cal03.html in your cal3 folder.
- Set the page title as "Calisthenics 3 - Finding the Errors" (no quotes)
- At the top of the document, type "Calisthenics 3 - Finding the Errors" (no quotes). Set this title as Heading 1 (h1 tag). Press the Return key to move your cursor to the next line.
- Type "by Your Name" (no quotes, and replace Your Name with your actual name). This text should be a regular paragraph (p tags). Press the Return key to move your cursor to the next line.
- Type "Part 1 - HTML Errors" (no quotes). Set this as Heading 2 (h2 tag). Press the Return key to move your cursor to the next line.
- Find all 10 errors in Part 2 as shown in the example above.
- When you are finished, type "Part 2 - CSS Errors" (no quotes). Set this as Heading 2 (h2 tag).
- Press the Return key to move your cursor to the next line.
- Find all 10 errors in Part 3 as shown in the example above.
- Continue to Part 4--Submission.
Part 2 -- HTML Errors
Examine the following HTML code and note the errors.
There are 15 errors in the code that will cause problems with this file when viewed in your browser. Locate the 10 coding errors in the HTML below. For each error, note the line number and what the error is.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My First Web Page{/title}
<link rel="stylesheet" type="text/css" href="styles;css" />
<body>
<h1>My first web page
<h2>What this is<\h2>
<p>My name is Ima Student <br /> and this is my first web page.</p>
<p This is the most <em><strong>exciting<em\></strong> thing I have done!</p>
<p>Yes, that <em>is</em> what I said. How <strong>very</strong> exciting.</p>
<h2>Why is this?</h2>
</ul>
<li>I am learning HTML</li>
<li>I am showing off</li>
<li>I will soon be designing my own web pages!</li>
Reasons to design my own web pages:</h2>
<ol>
<ul>To save money</li>
<li>To make money</li>
<li>Because I love it!</li>
</ol>
<h2>Where to find the tutorial:</h2>
<p class=".special"><a href=http://www.htmldog.com">HTML Dog</a></p>
<img src="http://www.htmldog.com/r/logo.gif" width="157" height="70" alt=HTML Dog logo />
</body>
<html>
Part 3 -- CSS Errors
Look closely at each line of code in this sample excerpt of a CSS file below.
There are 15 errors in the code that will cause this file to not apply the styles correctly. Locate the 10 coding errors in the CSS below.
For each error, note the line number and what the error is.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
body {
size: .8em;
font-color: black;
background-color: #ffc;
font-family: Arial, Helvetica, sans-serif;
}
h1 {font-size: 3em
color: #ffc;
page-color: #009
};
<p> {
color: red;
letter-spacing: .5em;
word-spacing: 2em;
line-height: 1.5;
,special {
color= green;
font-style: bold;
border-bottom-line: solid;
border-bottom-width: medium;
border-bottom-color: green;
>
h2
font-weight: bolder;
text-transform uppercase;
background-color: #ccc;
margin: 1px
padding: 1.5px;
border: dashed 009 3px;
}
Part 4 -- Submission
- Save and upload your Web page to the SWS.
- Mail it to your instructor using a subject like CAS 111d Calisthenics 3 Uploaded Your Name (where Your Name is your actual name)
Instructor Note:
As you should be in the habit of doing, be sure to use a browser (or more than one browser) to check your Web pages on the SWS to ensure everything works properly.