Discussion :  SOU CS Classes The fastest message board... ever.
Forum for discussion, questions, and replies relating to Web Development I 
Goto Thread: PreviousNext
Goto: Forum ListMessage ListNew TopicSearchLog In
Week 2 - Friday Discussion
Posted by: harveyd (IP Logged)
Date: October 05, 2007 08:13PM

1.Fix a bug: what is wroing with the following style sheet syntax. Answer at most two of these.
a. h1 {text-decoration: line-though}
b. h1, h2, h3: {color: red}
c. h1 {font-family: arial, courier new, monospace;}
d. div.right {position: absolute; top; 50px; left; 30px; }
e. a:visited {color:red;
f. h1#large "font-size:xx-large;"
g. p.large {font-size:30;}
h. div.right {top:30px; left:40px; height:100px; width:100px;}
i. img {background-image: myPicture.jpg;}
j. body {background-image: {"myPicture.jpg";}
k. h1 {font-family: "arial;}
2. Create an inline style. Answer at most two of these
a. Body tag that chancges the background image
b. Div tag creating a box 100 pixels by 100 pixels
c. Div tag creating a box 5 inches by 5 inches
d. Div tag with a background color of green
e. Span tag with arial or verdano font and a font size of 30 points
f. Div box with a green border
g. Div box with top and left border of green, bottom and left border of grey
h. Div box postioned 30 pixels from the left and 50 pixels from the top
i. Div box with a ridge border
j. A tag with text with a strike through line
k. Text that blinks
l. Text with a line over the top
m. A paragraph tag with a large green font
n. Any style that you consider cool.
3. Fixing HTML and CSS errors
a. Describe how you find CSS errors in your web pages
b. What CSS or HTML errors have you encountered and fixed that could save your classmates time should they stumble into the same thing
c. Tell us something the class would find interesting about Firefox web development tools
d. Tell us something interesting about the Notepad++ HTML editor
e. Tell us something interesting about debug features in other browsers
f. What can you tell us about other validating and debug aids that are available?
g. There is a site called htmlhelp.com. What web development aids does this site provide that are not available in Firefox?
4. Describe how you would transform your web page from using a document level style sheets to external. Be specific as if you were posting a 'how to' document on the Web.
5. How is '#' different than ':' in style sheet conventions?
6. What are one or two things about style sheet syntax that could cause the browser to ignore them?
7. Tell us something about how to use another css style
8. What is a good discussion topic for future classes?
9. What would be a good lab project?
10. Create a test question that you think would be good to add to either the on-line lecture, for a synthesis question, or for a quiz. Answer your question.
11. What do you wish you knew at the start of the lab project?
12. What suggestions do you have for the on-line lectures, lab projects, power point slides, etc.?
13. What mistakes did you find in the on-line material?

Re: Week 2 - Friday Discussion
Posted by: (IP Logged)
Date: October 06, 2007 08:29AM

1.Fix a bug: what is wroing with the following style sheet syntax. Answer at most two of these.

a. h1 {text-decoration: line-though}

The above line of code is missing a semi-colon before the final closing bracket:

h1
{
text-decoration: line-though;
}

Note from Dan: Also spelling error. Should be line-through

e. a:visited {color:red;

The above code is missing the final closing bracket:


a:visited
{
color: red;
}



Edited 1 time(s). Last edit at 10/08/2007 02:47PM by harveyd.

Re: Week 2 - Friday Discussion
Posted by: (IP Logged)
Date: October 06, 2007 04:08PM

d. div.right {position: absolute; top; 50px; left; 30px; }

There is a semi colon rather than a colon next to to the word "left".
It should read
d. div.right {position: absolute; top; 50px; left: 30px; }

Note from Dan: The same error is after top. It should read top: 50px;



Edited 1 time(s). Last edit at 10/08/2007 02:50PM by harveyd.

Re: Week 2 - Friday Discussion
Posted by: (IP Logged)
Date: October 06, 2007 05:40PM

J: body {background-image: {"myPicture.jpg";}
There are too many brackets. The brackets should be before background and at the very end only. It would look like this: body {background-image: "mPicture.jpg";}

Note from Dan: Also need url. background-image: url("myPicture.jpg");

k:h1 {font-family: "arial;}
The word arial is missing quotations. It should look like this:
{font-family: "arial";}



Edited 1 time(s). Last edit at 10/08/2007 02:52PM by harveyd.

Re: Week 2 - Friday Discussion
Posted by: (IP Logged)
Date: October 06, 2007 11:36PM

1.Fix a bug: what is wroing with the following style sheet syntax. Answer at most two of these.
wrong is spelled wrong

h. div.right {top:30px; left:40px; height:100px; width:100px;}
There is no positioning property - it should read:
div.right {position: absolute; top:30px; left:40px; height:100px; width:100px;}

i. img {background-image: myPicture.jpg;}
img is a tag and not part of the CSS. To set the backgroung image requires a change to the body and the picture is referenced by a URL.
body { background-image:url('myPicture.jpg') }

Note from Dan: The above format assigns the style to the image tag. The syntax is ok, but it doesn't make much sense. Applying to the body tag as suggested makes more sense.



Edited 1 time(s). Last edit at 10/08/2007 02:55PM by harveyd.

Re: Week 2 - Friday Discussion
Posted by: (IP Logged)
Date: October 08, 2007 04:49AM

2. Create an inline style. Answer at most two of these


c. Div tag creating a box 5 inches by 5 inches

<div style="width: 5in; height: 5in;">

</div>


h. Div box positioned 30 pixels from the left and 50 pixels from the top

<div style="position:absolute; left:30px; top:50px;">

</div>

Re: Week 2 - Friday Discussion
Posted by: (IP Logged)
Date: October 08, 2007 05:18AM

k. Text that blinks

<p style="text-decoration:blink">This paragraph blinks.</p>

m. A paragraph tag with a large green font

<p style="font-size:xx-large; color:#008000">This paragraph has a large green font.</p>

Re: Week 2 - Friday Discussion
Posted by: (IP Logged)
Date: October 08, 2007 09:50PM

1.Fix a bug: what is wroing with the following style sheet syntax. Answer at most two of these.
b. h1, h2, h3: {color: red}

h1, h2, h3 {color:red}
Don't need colon after h3

3. Fixing HTML and CSS errors

b. What CSS or HTML errors have you encountered and fixed that could save your classmates time should they stumble into the same thing

Closing tags properly. I had two tags that weren't closed.

Putting the external style sheet link in the style section under the header.

Extra characters in the code.

I found all of these with the web validator. I was able to find them and fix them.

11. What do you wish you knew at the start of the lab project?
I didn't fully understand how to move my div box to the right side. It took me most of the day to find the "float" tag.

Also, I had trouble with the background image.

Re: Week 2 - Friday Discussion
Posted by: (IP Logged)
Date: October 09, 2007 03:11AM

5. How is '#' different than '.' in style sheet conventions?

When using the '#" symbol you must use 'id' when refering to it in text and when using '.' you must use 'class' when refering to it in text.

11. What do you wish you knew at the start of the lab project?

How to create clickable links for inside the box on the left hand side of Lab2

Re: Week 2 - Friday Discussion
Posted by: (IP Logged)
Date: October 10, 2007 12:50AM

11. What do you wish you knew at the start of the lab project?

I wish I'd known a bit more about positioning... I had a hard time getting my <div>'s positioned the right way on the page. They looked great in IE, but were all weird in Firefox. I got it figured out, but it would have saved me a lot of time to have known a little more about it. :)

Re: Week 2 - Friday Discussion
Posted by: (IP Logged)
Date: October 14, 2007 06:43AM

d. div.right {position: absolute; top; 50px; left; 30px; }

div.right
{
position: absolute;
top: 50px;
left: 30px;
}

- semi-colon located in wrong places.


h. div.right {top:30px; left:40px; height:100px; width:100px;}

div. right
{
position: .............;
top:30px;
left:40px;
height:100px;
width:100px;
}

- Everything is good except including the position and whatever it will be absolute, relative, static, or fixed and of course with (:) and (;).

Re: Week 2 - Friday Discussion
Posted by: (IP Logged)
Date: November 18, 2007 10:09PM

b. h1, h2, h3: {color: red}
no colon needed, and a semi colon needed after red should read h1,h2,h3{color:red;}
m. A paragraph tag with a large green font
<style type="text/css">
<!--
.style2 {
color: #00CC00;
font-weight: bold;
}
-->
</style></head>

<body>
<p class="style2">Hello my name is Lori.</p>

Re: Week 2 - Friday Discussion
Posted by: (IP Logged)
Date: November 19, 2007 12:03AM

1.Fix a bug: what is wroing with the following style sheet syntax. Answer at most two of these.
a. h1 {text-decoration: line-though}
-The syntax above is just a common typing error as well as missing a semicolon. line-though
should be spelled line-through

d. div.right {position: absolute; top; 50px; left; 30px; }
-The semicolons at the end of top and left should be colons (:)



Sorry, only registered users may post in this forum.
This forum powered by Phorum.