CSS Link Styles
The first item is to alter a link or style or some other HTML modifier using CSS. This is pretty simple code for CSS to handle. To start with, let's look at the HTML required for a link to work. The basic code for an HTML link to another web page is:
<a href="webpagename.htm>A link title and then</a>
You will need the </a> to close the tag otherwise you will get an error. This example result in a line on your screen that looks like this:
A link title and then
The standard link settings for most browsers are blue for a link on the page, purple for links that you have been to already, and red for the link that you just clicked on. So the example above is a link that you haven't visited yet. To change this, you could put some code in your HTML that would change these default colors. This is done in the <body> tag. An example would look something like:
<body bgcolor="#000000" text="#ffff66" link="#00ff33" vlink="#00bb33"
alink="#00ddff">
In this example, we've changed the background color (bgcolor), the text color (text), the regular link color (link), the visited link (vlink), and the active link (alink). This is an easy way, but it will change the color of all of your links. Maybe you want different links to be different colors. There are ways to do that in HTML, but for our purposes, we want to use CSS, so let's look at some easy CSS.
In CSS, there are multiple ways of making the changes: in a file that we import or link into our HTML page, inline style code, or style list in the head portion of the page are a few of them. In a later assignment, we'll look at the cascading effects of CSS.
The a anchor tag is the basic link HTML tag. When we use the CSS, we need to reference that tag so that only that portion of our page is different. Making changes to the a tag alone will change the properties for all of the links and in every state for the page. With that tag, are a few attributes we can change to spice up our links. A couple of them are hover, active, link, and visited. The basic CSS for our link changes would look something like this:
a {
text-decoration: none;
color: red;
}
The text-decoration: none; takes away the default underline and the color: red; changes the color of the text from the default blue to red. It can also look like this:
a { text-decoration: none; color: red; }
For other attributes, such as hover and visited, the code could look like this:
a:hover, a:visited { color: purple; }
So, that is how we make changes to the link attributes through CSS.
Javascript for browser identification
Well, this is where I become the idiot. My experience with Javascript can be summed up into three words: I borrow code. The language is very similar to Visual BASIC and C, but I do not have have any experience coding Javascript. Borrowing code that is very close to my needs and then tailoring it to fit my requirements is suitbale as long as the site you are borrowing from allows you to use their code freely. Since I cannot explain the Javascript used, I will simply show you the code.
<script type="text/javascript">
Need this to start the Javascript interpreter This next part figures out what browser you are using
document.write( 'This browser's designation is: <br />' );
document.write( navigator.appName + ' ' );
document.write( navigator.appVersion );
if ( navigator.appName.indexOf( 'Mac' ) != -1 )
{ isMac=1; }
else {
if ( navigator.appVersion.indexOf ( 'Win' ) != -1 )
{ isWin = 1; }
else {
isOther = 1; }
}
This part tells you what platform is being used
document.write( '<br /><br />' );
if ( isMac )
{ document.write( 'This browser is running on a Mac.' ); }
else {
if ( isWin )
{ document.write( 'This browser is running in Windows.' ); }
else {
{ document.write( 'This browser is running on an unknown OS.' ); }
}
}
And you'll need this to stop the interpreter
</script>
Now you have this fancy code to use in your webpage.
Changing the background color
Another fine piece of Javascript that once I found it, was easy to use and simple to understand. For this one, I had to find the Javascript that would change the background color. Once I had that, I added the code to ask for the color number and then the writing of the color choice at the end. This is a small piece of code.
<script type="text/javascript">
var userColor=prompt("Please enter a color number",
"Enter number here");
document.body.style.background='#'+userColor;
document.write('You have chosen color #'+userColor);
</script>
Looks pretty easy, huh? Yeah, right...
The Assignment
Three items for this assignment
- Uses CSS to alter link color or style or some other HTML modifier
- Use JavaScript to detect the end users operating system and Web browser and display it on the page
- Use Javascript to ask user their favorite color and then change the background of the page to that color
The Links
CS 544 assignment two
The real deal from the instructor
My assignment two
This is how I did the assignment
The Sections
The Assignment Files
Assignment two zip file
For users whose browser displays the page rather than shows the code