Re: CSS: Lesson 1: Topic 1A

Announcements	Last Post
	SoC Curricula	09/30/2017 01:08PM
	Demarcation or scoping of examinations and assessment	02/13/2017 07:59AM
	School of Computing Short Learning Programmes	11/24/2014 08:37AM
	Unisa contact information	07/28/2011 01:28PM

78175232

Re: CSS: Lesson 1: Topic 1A
November 12, 2013 03:54PM

Registered: 10 years ago
Posts: 31
Rating: 0

1. please help again, i don't know whats going on with my website

2. See below my website still no links working

Reply Quote

78175232

Re: CSS: Lesson 1: Topic 1A
November 12, 2013 03:54PM

Registered: 10 years ago
Posts: 31
Rating: 0

<!DOCTYPE index.html "-//W3C//DTD HTML 1.0 Transitional//EN" "[www.w3.org];>
<html>
<head>
<title>|| WELCOME TO CHARLOTTE'S WEBSITE || </title>
<link href="formstyle.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
function checkform(pform1){
var str=pform1.password.value;
var email = pform1.email.value;
var phone = pform1.phone.value;
var cleanstr = phone.replace(/[\.\-\ ]/g, '' winking smiley

;
var err={};
var validemail =/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;

//check required fields
//password should be minimum 4 chars but not greater than 8
if ((str.length < 4) || (str.length > 8)) {

err.message="Invalid password length";
err.field=pform1.password;
}

//validate email
if(!(validemail.test(email))){
err.message="Invalid email";
err.field=pform1.email;

}

//check phone number
if (isNaN(parseInt(cleanstr))) {
err.message="Invalid phone number";
err.field=pform1.phone;
}

if(err.message)
{
document.getElementById('divError' winking smiley

.innerHTML = err.message;
err.field.focus();
return false;

}

return true
}

.my2ndNewStyle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FF0000;
}

.my3rdNewStyle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12pt;
color: #FF0000;
}
</script>

</head>

<body bgcolor="green">

<ul>
<li><a href="#Home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Gallery</a></li>
<li><a href="#about">About</a></li>
<li><a href="#about">Contact us</a></li>
</ul>

<p class="standardArrow"><a href="#"><img border="0" src="/images/pic1.jpg" alt="pic1" width="1200" height="300"><img</a></p>

<h1>Contact Form </h1>
<form action="" method="POST" onsubmit="return checkform(this);">

<div id="errmsgbox">

<div id="divError"></div>

</div>

<fieldset class="credentials">
<legend>Access Credentials</legend>

<table border="0">

<tr>
<td><label for="username" class="hover">Username</label></td>
<td><input type="text" id="username" class="required text"/>
<span class="style1">*</span></td>
</tr>
<tr>
<td><label for="password" class="hover">Password</label></td>
<td><input type="password" id="password" class="required text"/>
<span class="style1">*</span><br />
<span class="tooltip">Minimum four and maximum eight characters</span> </td>
</tr>
<tr>
<td><label for="email">Email</label></td>
<td><input type="text" id="email" class="required email text"/>
<span class="style1">*</span></td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Other Information</legend>
<table border="0">

<tr>
<td width="59"><label for="name">Name</label></td>
<td width="207"><input type="text" id="name" class="required text"/>
<span class="style1">*</span></td>
</tr>
<tr>
<td><label for="phone">Phone</label></td>
<td><input type="text" id="phone" class="phone text"/></td>
</tr>
<tr>

<td colspan="2"><input type="submit" value="Submit Form" class="submit"/></td>
</tr>
<tr>
<td colspan="2">* = Required Field</td>
</tr>
</table>

</fieldset>
</form>

<a href=http://osprey.unisa.ac.za/phorum/read.php?754,183312,183312#msg-183312> Active Participation</a>

<address>
Visit us on www.charlotte.freevar.com/html
Tzaneen,Agatha street no 10
P.O.Box 1486, Tzaneen 0850 Limpopo Province,Tell:015 307 8045 <br>
</address>
<table border="2" align="right">
<tr>
<th>Month</th>
<th>Events</th>
<th>Date</th>
<th>Responsible</th>
</tr>
<tr>
<td>January</td>
<td>school opening</td>
<td>10/01/2014</td>
<td>Refilwe</td>
</tr>
<tr>
<td>February</td>
<td>Vilentine's day</td>
<td>14/02/2014</td>
<td>Puseletso</td>
</tr>
</table>

<p>Love them all but trust no one.</p>
<p><b>Note:</b> God is love</p>

</body>
</html>

Reply Quote

78175232

Re: CSS: Lesson 1: Topic 1A
November 12, 2013 04:43PM

Registered: 10 years ago
Posts: 31
Rating: 0

1. please help again, i don't know whats going on with my website

2. See below my website still no links working

Reply Quote

78175232

Re: CSS: Lesson 1: Topic 1A
November 12, 2013 04:43PM

Registered: 10 years ago
Posts: 31
Rating: 0

<!DOCTYPE index.html "-//W3C//DTD HTML 1.0 Transitional//EN" "[www.w3.org];>
<html>
<head>
<title>|| WELCOME TO CHARLOTTE'S WEBSITE || </title>
<link href="formstyle.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
function checkform(pform1){
var str=pform1.password.value;
var email = pform1.email.value;
var phone = pform1.phone.value;
var cleanstr = phone.replace(/[\.\-\ ]/g, '' winking smiley

;
var err={};
var validemail =/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;

//check required fields
//password should be minimum 4 chars but not greater than 8
if ((str.length < 4) || (str.length > 8)) {

err.message="Invalid password length";
err.field=pform1.password;
}

//validate email
if(!(validemail.test(email))){
err.message="Invalid email";
err.field=pform1.email;

}

//check phone number
if (isNaN(parseInt(cleanstr))) {
err.message="Invalid phone number";
err.field=pform1.phone;
}

if(err.message)
{
document.getElementById('divError' winking smiley

.innerHTML = err.message;
err.field.focus();
return false;

}

return true
}

.my2ndNewStyle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FF0000;
}

.my3rdNewStyle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12pt;
color: #FF0000;
}
</script>

</head>

<body bgcolor="green">

<ul>
<li><a href="#Home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Gallery</a></li>
<li><a href="#about">About</a></li>
<li><a href="#about">Contact us</a></li>
</ul>

<p class="standardArrow"><a href="#"><img border="0" src="/images/pic1.jpg" alt="pic1" width="1200" height="300"><img</a></p>

<h1>Contact Form </h1>
<form action="" method="POST" onsubmit="return checkform(this);">

<div id="errmsgbox">

<div id="divError"></div>

</div>

<fieldset class="credentials">
<legend>Access Credentials</legend>

<table border="0">

<tr>
<td><label for="username" class="hover">Username</label></td>
<td><input type="text" id="username" class="required text"/>
<span class="style1">*</span></td>
</tr>
<tr>
<td><label for="password" class="hover">Password</label></td>
<td><input type="password" id="password" class="required text"/>
<span class="style1">*</span><br />
<span class="tooltip">Minimum four and maximum eight characters</span> </td>
</tr>
<tr>
<td><label for="email">Email</label></td>
<td><input type="text" id="email" class="required email text"/>
<span class="style1">*</span></td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Other Information</legend>
<table border="0">

<tr>
<td width="59"><label for="name">Name</label></td>
<td width="207"><input type="text" id="name" class="required text"/>
<span class="style1">*</span></td>
</tr>
<tr>
<td><label for="phone">Phone</label></td>
<td><input type="text" id="phone" class="phone text"/></td>
</tr>
<tr>

<td colspan="2"><input type="submit" value="Submit Form" class="submit"/></td>
</tr>
<tr>
<td colspan="2">* = Required Field</td>
</tr>
</table>

</fieldset>
</form>

<a href=http://osprey.unisa.ac.za/phorum/read.php?754,183312,183312#msg-183312> Active Participation</a>

<address>
Visit us on www.charlotte.freevar.com/html
Tzaneen,Agatha street no 10
P.O.Box 1486, Tzaneen 0850 Limpopo Province,Tell:015 307 8045 <br>
</address>
<table border="2" align="right">
<tr>
<th>Month</th>
<th>Events</th>
<th>Date</th>
<th>Responsible</th>
</tr>
<tr>
<td>January</td>
<td>school opening</td>
<td>10/01/2014</td>
<td>Refilwe</td>
</tr>
<tr>
<td>February</td>
<td>Vilentine's day</td>
<td>14/02/2014</td>
<td>Puseletso</td>
</tr>
</table>

<p>Love them all but trust no one.</p>
<p><b>Note:</b> God is love</p>

</body>
</html>

Reply Quote

bigron11

Re: CSS: Lesson 1: Topic 1A
November 12, 2013 09:34PM

Admin
Registered: 11 years ago
Posts: 6,606
Rating: 396

These are not scripts <script>, they are styles <style type ="text/css">

Language: CSS
.my2ndNewStyle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FF0000;
}
 
.my3rdNewStyle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12pt;
color: #FF0000;
}
</script>

Change it to this -

Language: CSS
</script>
<style type="text/css">
.my2ndNewStyle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FF0000;
}
 
.my3rdNewStyle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12pt;
color: #FF0000;
}
</style>

What are you trying to link to with these links ?

Language: HTML
<ul>
<li><a href="#Home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Gallery</a></li>
<li><a href="#about">About</a></li>
<li><a href="#about">Contact us</a></li>
</ul>

You must have tags with the same id as the link, #Home, #news etc, on the page in order to link to them -
(Assuming that you are trying to link to the same page, it is different if you are trying to link to other pages)

Eg:

Language: HTML
<div id="Home">
 
<table id="news">

You can use any tag for this.

You can also use an anchor, with a name - (This is the old-fashioned way, now deprecated)

Language: HTML
<a name="Home">

Reply Quote

78175232

Re: CSS: Lesson 1: Topic 1A
November 13, 2013 08:45AM

Registered: 10 years ago
Posts: 31
Rating: 0

when i open news i wand to see and information and also my contact form when i fill the information i want to be replied

Reply Quote

bigron11

Re: CSS: Lesson 1: Topic 1A
November 13, 2013 09:14AM

Admin
Registered: 11 years ago
Posts: 6,606
Rating: 396

Language: HTML
<ul>
<li><a href="#Home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Gallery</a></li>
<li><a href="#about">About</a></li>
<li><a href="#about">Contact us</a></li>
</ul>

If you are trying to link to separate pages, then your links should be like this -

Language: HTML
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="news.html">News</a></li>
<li><a href="contact.html">Gallery</a></li>
<li><a href="about.html">About</a></li>
<li><a href="about.html">Contact us</a></li>
</ul>

You only use the hash # if you want to link to the current page, or to a specific place on a page.

Reply Quote

78175232

Re: CSS: Lesson 1: Topic 1A
November 14, 2013 03:57PM

Registered: 10 years ago
Posts: 31
Rating: 0

thank you very much

Reply Quote

78175232

Re: CSS: Lesson 1: Topic 1A
November 14, 2013 04:18PM

Registered: 10 years ago
Posts: 31
Rating: 0

please open my website and tell me whether is correct not www.charlotte.freevar.com/html

Reply Quote

bigron11

Re: CSS: Lesson 1: Topic 1A
November 14, 2013 04:44PM

Admin
Registered: 11 years ago
Posts: 6,606
Rating: 396

Your url is incorrect -

www.charlotte.freevar.com/html

You should access the website with -

www.charlotte.freevar.com

You have a page named index.php, which is the default page displayed when you access the website, and that is incorrect. (ie: it is not the page you want displayed first).

You MUST have your main (Home) page named index.html. (ie: The default page to display when somebody accesses your website.)
It seems to be named html at present - change it to index.html.

So, you need to rename some of your pages, and don't forget to rename the links etc as well.
Give them sensible names - not all index.??? with different extensions.

Eg:
contact.html
about.html
etc.

Reply Quote

78175232

Re: CSS: Lesson 1: Topic 1A
November 15, 2013 08:05AM

Registered: 10 years ago
Posts: 31
Rating: 0

thank you very much you are a life saver, one more thing can you please help me to link my pictures reflect when a person opens it

Reply Quote

78175232

Re: CSS: Lesson 1: Topic 1A
November 15, 2013 08:07AM

Registered: 10 years ago
Posts: 31
Rating: 0

actually on my gallary i have linked an image directory, when i opens it is picture folders comes up and i have to click on each picture to open so can you help me on that

Reply Quote

bigron11

Re: CSS: Lesson 1: Topic 1A
November 15, 2013 08:29AM

Admin
Registered: 11 years ago
Posts: 6,606
Rating: 396

Language: HTML
<li><a href="images/pic1.jpg">Gallery</a></li>

You are linking to one specific picture.

You need to implement a page gallery.html and link to that.

On the page gallery.html you either display the pictures directly with <img>, or else provide a menu with links to each of the pictures.

Reply Quote

78175232

Re: CSS: Lesson 1: Topic 1A
November 15, 2013 11:31AM

Registered: 10 years ago
Posts: 31
Rating: 0

ohk thank.en then if i want to someone when opens my website the picture on the background changes by itself what do i do

Reply Quote

bigron11

Re: CSS: Lesson 1: Topic 1A
November 15, 2013 11:45AM

Admin
Registered: 11 years ago
Posts: 6,606
Rating: 396

You need to use JavaScript for that.

Look here for an example -

http://www.hotscripts.com/forums/javascript/59719-changing-images-body-background.html

This is fairly advanced, and I'm not sure that constantly changing backgrounds is a good thing, most users will actually find it quite irritating.

Perhaps it would be better to just use a single background for now.

Reply Quote

78175232

Re: CSS: Lesson 1: Topic 1A
November 15, 2013 02:40PM

Registered: 10 years ago
Posts: 31
Rating: 0

you are right is irritating, thanks a lot for your help

Reply Quote

78175232

Re: CSS: Lesson 1: Topic 1A
November 15, 2013 03:39PM

Registered: 10 years ago
Posts: 31
Rating: 0

you know what i want is,i have a one picture on my website but it doesnt fill the whole page,what i want is the picture to change to an other picture not the whole website changes

Reply Quote

bigron11

Re: CSS: Lesson 1: Topic 1A
November 15, 2013 04:11PM

Admin
Registered: 11 years ago
Posts: 6,606
Rating: 396

Same process, just use an <img> tag instead of body { background-image: ???; }

Reply Quote