Computer Science Canada

Webpage

Author:  stef_ios [ Sun Feb 18, 2007 11:26 am ]
Post subject:  Webpage

Okay. So I am doing an assignment again, and the task is to make a webpage. It is in Strict XHTML, and I cannot get it to validate. Can someone please explain what the problem with my code is, and point out what I need to fix, because it uses CSS and I am fairly new at using CSS. Also, I need to know how to use an external style sheet and a meta tag in this code, because I need the page to render in several different browsers, not just explorer. Any help I can get is great!! Thanks! Here's my code:
code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">


<head>
        <title>Webpage #1 : Greek League Soccer Standings</title>

<style type="text/css" media="screen">

a:link{color:#0000FF}
a:visited{color:#FF0000}
a:hover{color:#008000}
a:active{color:#FF0000}

#width950 {
width: 950px;
border-style: solid;
border-color: #FFFFFF;
color: #FFFFFF;
}

body {
background-color: #808080;
font-style: bold;
colour: #FFFFFF;
}

h3 {font-style: bold;
text-decoration: underline;
text-align: center;
}

table { background-color: #000000;
colour: #FFFFFF;
border-style: outset;
border-width: 1px;
}

</style>

</head>

<body>

        <h3>Greek League Soccer Standings</h3>

<table border="1" id="width950">
        <tr>
                <th><b>Team</b></th>
                <th><b>Standing</b></th>
                <th><b>Points</b></th>
        </tr>
        <tr>
                <td align="center">Olympiakos<a href="http://en.olympiakos.gr/" target="_blank">
                                <img border="0" src="olympiakos.jpg" width="50" height="50" alt="Olympiakos" /></a>
                </td>
                <td align="center">1</td>
                <td align="center">53</td>
        </tr>
        <tr>
                <td align="center">AEK Athens<a href="http://www.aekfc.gr/index.asp?a_id=296" target="_blank">
                                <img border="0" src="aek.jpg" width="50" height="50" alt="AEK Athens" /></a>
                </td>
                <td align="center">2</td>
                <td align="center">43</td>
        </tr>
        <tr>
                <td align="center">Panathinaikos<a href="http://www.pao.gr/index.php?category_id=3" target="_blank">
                                <img border="0" src="panathinaikos.jpg" width="50" height="50" alt="Panathinaikos" /></a>
                </td>
                <td align="center">3</td>
                <td align="center">42</td>
        </tr>
        <tr>
                <td align="center">Aris Thessaloniki<a href="http://www.arisfc.gr/" target="_blank">
                                <img border="0" src="aris.jpg" width="50" height="50" alt="Aris Thessaloniki" /></a>
                </td>
                <td align="center">4</td>
                <td align="center">30</td>
        </tr>
</table>

<p>The following is the webite where I found my information.</p>
<p><a class="one" href="http://sports.phantis.com/soccer/championship/superleague/standings.php" target="_blank">Phantis: Greek Soccer </a></p>

</body>

</html>

Author:  rdrake [ Sun Feb 18, 2007 12:05 pm ]
Post subject:  RE:Webpage

Ok, my xhtml skills are a little rusty, but...

The bold tags and center="" attributes are all depreciated (that is to say, not used anymore nor suggested they be used). You might wish to consider replacing each instance of them with id="" or class="".

You will want to use the following CSS as their replacements. Adjust the following as necessary:
code:
#centredtext {
    text-align:  center;
}
#boldtext {
    font-weight:  bold;
}
Hope that helps.

Author:  stef_ios [ Sun Feb 18, 2007 1:57 pm ]
Post subject:  Re: Webpage

Okay. In CSS how do you make the link for a link open in a new window? Also, how do you change the border for a picture? Here is my code, and it is not validating for thos two things.

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">


<head>

<meta name="Description" content="This webpage shows the points and rankings of the top four teams in the Greek Soccer League.">
<meta name="Keywords" content="aek, olympiakos, aris, panathinaikos, greece, soccer, standings.">
<meta name="Language" content="en">
<meta name="Robots" content="All">

        <title>Webpage #1 : Greek League Soccer Standings</title>

<link rel="stylesheet" type="text/css" href="test.css" />

<style type="text/css" media="screen">

a:link{color:#0000FF}
a:visited{color:#FF0000}
a:hover{color:#008000}
a:active{color:#FF0000}

#width950 {
width: 950px;
border-style: solid;
border-color: #FFFFFF;
color: #FFFFFF;
}

body {
background-color: #808080;
font-style: bold;
colour: #FFFFFF;
}

h3 {font-style: bold;
text-decoration: underline;
text-align: center;
color: #FFFFFF;
}

table { background-color: #000000;
colour: #FFFFFF;
border-style: outset;
border-width: 1px;
}

p{text-align: center;
color: #FFFFFF;
}

</style>

</head>

<body>

        <h3>Greek League Soccer Standings</h3>

<table border="1" id="width950">
        <tr>
                <th><b>Team</b></th>
                <th><b>Standing</b></th>
                <th><b>Points</b></th>
        </tr>
        <tr>
                <td align="center">Olympiakos<a href="http://en.olympiakos.gr/" target="_blank">
                                <img border="0" src="olympiakos.jpg" width="50" height="50" alt="Olympiakos" /></a>
                </td>
                <td align="center">1</td>
                <td align="center">53</td>
        </tr>
        <tr>
                <td align="center">AEK Athens<a href="http://www.aekfc.gr/index.asp?a_id=296" target="_blank">
                                <img border="0" src="aek.jpg" width="50" height="50" alt="AEK Athens" /></a>
                </td>
                <td align="center">2</td>
                <td align="center">43</td>
        </tr>
        <tr>
                <td align="center">Panathinaikos<a href="http://www.pao.gr/index.php?category_id=3" target="_blank">
                                <img border="0" src="panathinaikos.jpg" width="50" height="50" alt="Panathinaikos" /></a>
                </td>
                <td align="center">3</td>
                <td align="center">42</td>
        </tr>
        <tr>
                <td align="center">Aris Thessaloniki<a href="http://www.arisfc.gr/" target="_blank">
                                <img border="0" src="aris.jpg" width="50" height="50" alt="Aris Thessaloniki" /></a>
                </td>
                <td align="center">4</td>
                <td align="center">30</td>
        </tr>
</table>

<p><a class="one" href="http://sports.phantis.com/soccer/championship/superleague/standings.php" target="_blank">Phantis: Greek Soccer </a></p>

</body>

</html>

Author:  Amailer [ Sun Feb 18, 2007 2:41 pm ]
Post subject:  RE:Webpage

In XHTML Strict, you CANNOT open links in a new window, see this post for more details :/

A workaround for it is to use javascript, but I would find that simply ridiculous.

As for image border, you can give the image a class and in that class, set its border like you would for a div.


: