Below is some code for a class project that I am working on, but I encountered problems. How do i
write a CSS with the span tag to make the words "1000 Search Engines" blinking and in green and a couple of pixel sizes larger?
Thanks,
<ZCorker>
<[email protected]>
ATTACHMENT
<!doctype html public "-//w3c//dtd xhtml 1.0 frameset//en">
<html>
<title>
Web Page Submission Service
</title>
<head>
<style type="text/css">
div.panic span |
{color: green; font-size: ex-large}
H1 {margin-top : 1em; text-indent: 8em; color: #0000FF; font-variant: small-caps=18, }
P {text-indent: 2em; color : #000000; font-size: 17pt; margin-top : 2em;
<span> style="color : #008000; font-size 22pt; blinking;">'1000 search engines'</span> }
</style>
<h1> Webpage Submission Service
</h1>
</head>
<P> Get your web page submitted to over 1000 Search Engines for only $20.00
<br/>
<br/>
Amazing results !
<br/>
<br/>
<text-indent: 2em>
Hear the truth from John Brown in Dayton, Ohio . . .
</text-indent: 2em>
</span style>
<blockquote>
I was suspicious at first, but after the third day I became a true believer when
I saw how much mail I received from people who responded to my webpage. There were so many
responses that I couldn't even read them all. I had responses from small businesses,
general contractors, and even the local prosecutor who bought my service after contacting
me about a spam abuse complaint.
</blockquote>
<br/>
<hr size="5" width="40%" noshade align="left" />
<BR/>
<pre style = "font-size: 14 px;>
To place your order call:
Randal South
(425) 226-3812
(206) 424-3322 voice
<!-- e --><a href="mailto:[email protected]">[email protected]</a><!-- e -->
</pre>
</p>
</html><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
strong {color:#0f0; font-size:110%; text-decoration:blink}
-->
</style>
<title>Example</title>
</head>
<blody>
<p>Blah blah blah <strong>1000 Search Engines</strong> blah blah blah.</p>
</body>
</html>
Do not use the SPAN element to ape the depricated FONT element. It is important to use HTML properly. If you are trying to indicate strong emphasis then use the STRONG element.Thanks for the suggestion. I am really a newbie and only on Lesson 3 in an online HTML class I am taking.
You indicated that the <span> tag was improper. What would be a simpleand proper example of a proper <span> tag for changing the color of a 2nd word in a line?
Thanks.
ZCORKERI noticed that you used strict DTD. As a newbie, I am a little confused as to when I should use frames, versus transitional, versus Strict DTD. Why did you use strict DTD in here instead of the transitional that I used earlier?
ZCorker
<[email protected]>A document properly written in HTML 4.01 Strict or XHTML 1.0 Strict will work on all browsers, but if you use framesets the use the frameset DTD. By properly written, however, I mean something very specific. HTML is not a visual medium. Pages need to work on a vast array of browser types including Braille and audio browsers. To that end you need to mark up your document's content and not its presentation. You need to ask yourself why you are changing the presentation of some words on a page. If it's just random meaninglessness then go ahead and use the span element. (<span style="font-color:#f00">) But the fact that there is something different about those words will be lost on some browsers, so if you are trying to add emphasis then use the EM element or STRONG for strong emphasis.
Note also, that pages need to have their headings properly marked up as H elements and that you ought never to use TABLE elements for presentation.Thanks for your reply. Your information has been really helpful. Not sure if I totally understand why strict DTD is better in this case than frames or transitional, but I will try and make the page with your suggestions. I have only taken an intro to CSS and the html portion of the class is only on Lesson 3 which covers the <blockquote>, <pre> style, and <hr> tags.
I was not able to get my sample to work with a span tag and I am wondering what I have done wrong. I ran it through a Dr Watson online validator and came up with some error codes that I don't understand. The source code is listed at the end of the errors codes. I realize that it is probably too much to go through all of the error codes. Would really appreciate it if you could just go through Line 24. This might help me get a better understanding of what is going on.
Thanks,
ZCORKER
ATTACHMENT
Checking server response ...
Server response
Response code from <!-- m --><a class="postlink" href="http://www.geocities.com/zcorker/Homework3.htm">http://www.geocities.com/zcorker/Homework3.htm</a><!-- m -->
OK (code 200)
Analyzing HTML ...
Analyzing HTML syntax ...
Syntax and style analysis
(clicking on the line # takes you to that line in the code)
line #3: <HEAD> must immediately follow <HTML>
line #3: outer tags should be <HTML> .. </HTML>.
line #4: leading whitespace in content of container element TITLE
line #12: unknown element <<SPAN>.
line #12: <<SPAN> cannot appear in the HEAD element.
line #12: metacharacter ">" should be represented as ">"
line #12: unmatched </SPAN> (no matching <SPAN> seen).
line #12: metacharacter ">" should be represented as ">"
line #14: <H1> cannot appear in the HEAD element.
line #14: leading whitespace in content of container element H1
line #18: unknown element <BR/>.
line #19: unknown element <BR/>.
line #21: unknown element <BR/>.
line #22: unknown element <BR/>.
line #24: unmatched </SPAN> (no matching <SPAN> seen).
line #32: unknown element <BR/>.
line #33: unknown attribute "/" for element <HR>.
line #34: unknown element <BR/>.
line #43: unmatched </P> (no matching <P> seen).
line #44: unmatched </HTML> (no matching <HTML> seen).
line #53: unmatched </OBJECT> (no matching <OBJECT> seen).
line #53: unknown element <LAYER>.
line #53: element <LAYER> is not a container -- </LAYER> not legal.
line #53: unmatched </DIV> (no matching <DIV> seen).
line #53: unmatched </SPAN> (no matching <SPAN> seen).
line #53: unmatched </STYLE> (no matching <STYLE> seen).
line #53: unmatched </NOSCRIPT> (no matching <NOSCRIPT> seen).
line #53: unmatched </TABLE> (no matching <TABLE> seen).
line #53: unmatched </SCRIPT> (no matching <SCRIPT> seen).
line #53: unmatched </APPLET> (no matching <APPLET> seen).
line #54: empty container element <SCRIPT>.
line #54: empty container element <SCRIPT>.
line #54: empty container element <SCRIPT>.
line #54: empty container element <SCRIPT>.
Source code
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2 <HTML>
3 <HEAD>
4 <title>
5 Web Page Submission Service
6 </title>
7 <STYLE TYPE="text/css">
8 div.panic span |
9 {color: green; font-size: ex-large}
10 H1 {margin-top : 1em; text-indent: 8em; color: #0000FF; font-variant: small-caps=18, }
11 P {text-indent: 2em; color : #000000; font-size: 17pt; margin-top : 2em;
12 <<span> style="color : #008000; text-decoration: blink; font-size 22pt;" >'1000 search engines'</span>> }
13 </STYLE>
14 <H1> Webpage Submission Service
15 </H1>
16 </HEAD>
17 <P> Get your web page submitted to over 1000 search engines for only $20.00
18 <BR/>
19 <BR/>
20 Amazing results !
21 <BR/>
22 <BR/>
23 Hear the truth from John Brown in Dayton, Ohio . . .
24 </SPAN>
25 <BLOCKQUOTE>
26 I was suspicious at first, but after the third day I became a true believer when
27 I saw how much mail I received from people who responded to my webpage. There were so many
28 responses that I couldn't even read them all. I had responses from small businesses,
29 general contractors, and even the local prosecutor who bought my service after contacting
30 me about a spam abuse complaint.
31 </BLOCKQUOTE>
32 <BR/>
33 <HR SIZE="3" width="40%" noshade align="left" />
34 <BR/>
35 <PRE>
36 To place your order call:
37
38 Zcorker
42 </PRE>
43 </P>
44 </HTML>
45
46
47
48
49
50
51
52
53 <!-- text below generated by server. PLEASE REMOVE --></object></layer></div></span></style></noscript></table></script></applet>
54 <script language="JavaScript">var PUpage="76001081"; var PUprop="geocities"; </script><script language="JavaScript" src=http://www.webdeveloper.com/forum/archive/index.php/"http://www.geocities.com/js_source/pu5geo.js"></script><script language="JavaScript" src="http://www.geocities.com/js_source/ygNSLib9.js?v3"></script><script language="JavaScript">var yvnContents='http://us.toto.geo.yahoo.com/toto?s=76001081&l=NE&b=0&t=1059370930';yvnR='us';yfnEA(0);</script><script language="JavaScript" src=http://www.webdeveloper.com/forum/archive/index.php/"http://us.i1.yimg.com/us.yimg.com/i/mc/mc.js"></script><script language="JavaScript" src="http://geocities.com/js_source/geov2.js"></script><script language="javascript">geovisit();</script><noscript><img src="http://visit.webhosting.yahoo.com/visit.gif?us1059370930" alt="setstats" border="0" width="1" height="1"></noscript>
55 <IMG SRC=http://www.webdeveloper.com/forum/archive/index.php/"http://geo.yahoo.com/serv?s=76001081&t=1059370930" ALT=1 WIDTH=1 HEIGHT=1>
write a CSS with the span tag to make the words "1000 Search Engines" blinking and in green and a couple of pixel sizes larger?
Thanks,
<ZCorker>
<[email protected]>
ATTACHMENT
<!doctype html public "-//w3c//dtd xhtml 1.0 frameset//en">
<html>
<title>
Web Page Submission Service
</title>
<head>
<style type="text/css">
div.panic span |
{color: green; font-size: ex-large}
H1 {margin-top : 1em; text-indent: 8em; color: #0000FF; font-variant: small-caps=18, }
P {text-indent: 2em; color : #000000; font-size: 17pt; margin-top : 2em;
<span> style="color : #008000; font-size 22pt; blinking;">'1000 search engines'</span> }
</style>
<h1> Webpage Submission Service
</h1>
</head>
<P> Get your web page submitted to over 1000 Search Engines for only $20.00
<br/>
<br/>
Amazing results !
<br/>
<br/>
<text-indent: 2em>
Hear the truth from John Brown in Dayton, Ohio . . .
</text-indent: 2em>
</span style>
<blockquote>
I was suspicious at first, but after the third day I became a true believer when
I saw how much mail I received from people who responded to my webpage. There were so many
responses that I couldn't even read them all. I had responses from small businesses,
general contractors, and even the local prosecutor who bought my service after contacting
me about a spam abuse complaint.
</blockquote>
<br/>
<hr size="5" width="40%" noshade align="left" />
<BR/>
<pre style = "font-size: 14 px;>
To place your order call:
Randal South
(425) 226-3812
(206) 424-3322 voice
<!-- e --><a href="mailto:[email protected]">[email protected]</a><!-- e -->
</pre>
</p>
</html><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
strong {color:#0f0; font-size:110%; text-decoration:blink}
-->
</style>
<title>Example</title>
</head>
<blody>
<p>Blah blah blah <strong>1000 Search Engines</strong> blah blah blah.</p>
</body>
</html>
Do not use the SPAN element to ape the depricated FONT element. It is important to use HTML properly. If you are trying to indicate strong emphasis then use the STRONG element.Thanks for the suggestion. I am really a newbie and only on Lesson 3 in an online HTML class I am taking.
You indicated that the <span> tag was improper. What would be a simpleand proper example of a proper <span> tag for changing the color of a 2nd word in a line?
Thanks.
ZCORKERI noticed that you used strict DTD. As a newbie, I am a little confused as to when I should use frames, versus transitional, versus Strict DTD. Why did you use strict DTD in here instead of the transitional that I used earlier?
ZCorker
<[email protected]>A document properly written in HTML 4.01 Strict or XHTML 1.0 Strict will work on all browsers, but if you use framesets the use the frameset DTD. By properly written, however, I mean something very specific. HTML is not a visual medium. Pages need to work on a vast array of browser types including Braille and audio browsers. To that end you need to mark up your document's content and not its presentation. You need to ask yourself why you are changing the presentation of some words on a page. If it's just random meaninglessness then go ahead and use the span element. (<span style="font-color:#f00">) But the fact that there is something different about those words will be lost on some browsers, so if you are trying to add emphasis then use the EM element or STRONG for strong emphasis.
Note also, that pages need to have their headings properly marked up as H elements and that you ought never to use TABLE elements for presentation.Thanks for your reply. Your information has been really helpful. Not sure if I totally understand why strict DTD is better in this case than frames or transitional, but I will try and make the page with your suggestions. I have only taken an intro to CSS and the html portion of the class is only on Lesson 3 which covers the <blockquote>, <pre> style, and <hr> tags.
I was not able to get my sample to work with a span tag and I am wondering what I have done wrong. I ran it through a Dr Watson online validator and came up with some error codes that I don't understand. The source code is listed at the end of the errors codes. I realize that it is probably too much to go through all of the error codes. Would really appreciate it if you could just go through Line 24. This might help me get a better understanding of what is going on.
Thanks,
ZCORKER
ATTACHMENT
Checking server response ...
Server response
Response code from <!-- m --><a class="postlink" href="http://www.geocities.com/zcorker/Homework3.htm">http://www.geocities.com/zcorker/Homework3.htm</a><!-- m -->
OK (code 200)
Analyzing HTML ...
Analyzing HTML syntax ...
Syntax and style analysis
(clicking on the line # takes you to that line in the code)
line #3: <HEAD> must immediately follow <HTML>
line #3: outer tags should be <HTML> .. </HTML>.
line #4: leading whitespace in content of container element TITLE
line #12: unknown element <<SPAN>.
line #12: <<SPAN> cannot appear in the HEAD element.
line #12: metacharacter ">" should be represented as ">"
line #12: unmatched </SPAN> (no matching <SPAN> seen).
line #12: metacharacter ">" should be represented as ">"
line #14: <H1> cannot appear in the HEAD element.
line #14: leading whitespace in content of container element H1
line #18: unknown element <BR/>.
line #19: unknown element <BR/>.
line #21: unknown element <BR/>.
line #22: unknown element <BR/>.
line #24: unmatched </SPAN> (no matching <SPAN> seen).
line #32: unknown element <BR/>.
line #33: unknown attribute "/" for element <HR>.
line #34: unknown element <BR/>.
line #43: unmatched </P> (no matching <P> seen).
line #44: unmatched </HTML> (no matching <HTML> seen).
line #53: unmatched </OBJECT> (no matching <OBJECT> seen).
line #53: unknown element <LAYER>.
line #53: element <LAYER> is not a container -- </LAYER> not legal.
line #53: unmatched </DIV> (no matching <DIV> seen).
line #53: unmatched </SPAN> (no matching <SPAN> seen).
line #53: unmatched </STYLE> (no matching <STYLE> seen).
line #53: unmatched </NOSCRIPT> (no matching <NOSCRIPT> seen).
line #53: unmatched </TABLE> (no matching <TABLE> seen).
line #53: unmatched </SCRIPT> (no matching <SCRIPT> seen).
line #53: unmatched </APPLET> (no matching <APPLET> seen).
line #54: empty container element <SCRIPT>.
line #54: empty container element <SCRIPT>.
line #54: empty container element <SCRIPT>.
line #54: empty container element <SCRIPT>.
Source code
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2 <HTML>
3 <HEAD>
4 <title>
5 Web Page Submission Service
6 </title>
7 <STYLE TYPE="text/css">
8 div.panic span |
9 {color: green; font-size: ex-large}
10 H1 {margin-top : 1em; text-indent: 8em; color: #0000FF; font-variant: small-caps=18, }
11 P {text-indent: 2em; color : #000000; font-size: 17pt; margin-top : 2em;
12 <<span> style="color : #008000; text-decoration: blink; font-size 22pt;" >'1000 search engines'</span>> }
13 </STYLE>
14 <H1> Webpage Submission Service
15 </H1>
16 </HEAD>
17 <P> Get your web page submitted to over 1000 search engines for only $20.00
18 <BR/>
19 <BR/>
20 Amazing results !
21 <BR/>
22 <BR/>
23 Hear the truth from John Brown in Dayton, Ohio . . .
24 </SPAN>
25 <BLOCKQUOTE>
26 I was suspicious at first, but after the third day I became a true believer when
27 I saw how much mail I received from people who responded to my webpage. There were so many
28 responses that I couldn't even read them all. I had responses from small businesses,
29 general contractors, and even the local prosecutor who bought my service after contacting
30 me about a spam abuse complaint.
31 </BLOCKQUOTE>
32 <BR/>
33 <HR SIZE="3" width="40%" noshade align="left" />
34 <BR/>
35 <PRE>
36 To place your order call:
37
38 Zcorker
42 </PRE>
43 </P>
44 </HTML>
45
46
47
48
49
50
51
52
53 <!-- text below generated by server. PLEASE REMOVE --></object></layer></div></span></style></noscript></table></script></applet>
54 <script language="JavaScript">var PUpage="76001081"; var PUprop="geocities"; </script><script language="JavaScript" src=http://www.webdeveloper.com/forum/archive/index.php/"http://www.geocities.com/js_source/pu5geo.js"></script><script language="JavaScript" src="http://www.geocities.com/js_source/ygNSLib9.js?v3"></script><script language="JavaScript">var yvnContents='http://us.toto.geo.yahoo.com/toto?s=76001081&l=NE&b=0&t=1059370930';yvnR='us';yfnEA(0);</script><script language="JavaScript" src=http://www.webdeveloper.com/forum/archive/index.php/"http://us.i1.yimg.com/us.yimg.com/i/mc/mc.js"></script><script language="JavaScript" src="http://geocities.com/js_source/geov2.js"></script><script language="javascript">geovisit();</script><noscript><img src="http://visit.webhosting.yahoo.com/visit.gif?us1059370930" alt="setstats" border="0" width="1" height="1"></noscript>
55 <IMG SRC=http://www.webdeveloper.com/forum/archive/index.php/"http://geo.yahoo.com/serv?s=76001081&t=1059370930" ALT=1 WIDTH=1 HEIGHT=1>