1. CSS Styling
Let’s do some styling so we can change fonts and colors:
Copy and paste the following into Notepadd++ (don’t forget to delete the quotation marks and add them again!)
<!DOCTYPE html>
<html>
<head>
<title>Title of the webpage</title>
<style type=”text/css”>
body
{
background-color:#d0e4fe;
background-image:url(dogs.gif);
background-repeat:repeat;
background-position:center;
}
h1
{
color:orange;
text-align:center;
font-family:Times New Roman;
font-size:3em;
}
h2
{
color:orange;
text-align:center;
font-family:Times New Roman;
font-size:2em;
}
p
{
font-family:Times New Roman;
font-size:1em;
}
#navigation {
position: absolute;
top: 0;
left: 0;
width: 10em;
}
#content {
margin-left: 10em;
}
</style>
</head>
<body>
<div id=”navigation”>
<ul>
<li><a href=”#”>This</a></li>
<li><a href=”#”>That</a></li>
<li><a href=”#”>The Other</a></li>
</ul>
</div>
<div id=”content”>
<h1>Big Headline</h1>
<h2>Sub Headline (smaller)</h2>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
</div>
</body>
</html>
Let’s look at some colors:
You can either use a color hex value or name
Another cool color chart
Let’s make our links more interesting!
Styling Links with CSS
The four links states are:
a:link – a normal, unvisited link
a:visited – a link the user has visited
a:hover – a link when the user mouses over it
a:active – a link the moment it is clicked
They MUST be in that order if you’re going to use all of those attributes.
Please copy and paste the following code in your internal stylesheet just before the </style> tag:
a:link
{
text-decoration:none;
color:purple;
}
a:visited
{
text-decoration:none;
color:blue;
}
a:hover
{
text-decoration:underline;
color:red;
}
a:active
{
text-decoration:underline;
color:green;
}
Check out the different colors and when you see them- when you roll your mouse over a link, when you click on the link, what the link looks like after you have clicked on it, etc.
Try changing the colors. Notice they are the color names, not hex values. You can use either. See a good color list here.
Try changing the text decoration from underline to none.
2. Favicons
Finally, let’s add a favicon to our page. Favicons are the tiny icons that appear on the top left next to a website’s name and URL.
First, you must design your favicon in some kind of image editor such as Photoshop. You might also be able to find free favicon generators online. Try this website: http://favicon-generator.org/. It will take a picture or graphic you have and turn it into a favicon. The picture must be a perfect square (same length and width). To do this open up your image with either Photoshop or whatever image editor you have on your computer and crop and resize your image to make sure it’s the same length and width. If you want, click here to download the Mustang logo to use (it is a perfect square).
If you don’t use an image that is a perfect square you will end up with a distorted favicon because the favicon it generates will be 16 pixels by 16 pixels.
Again, pay attention to file name and file type. Save your favicon as favicon.ico and save it in the same place as your index file (your folder on your desktop).
Now that you have created your favicon, step two is adding code to your webpage.
Add this to your head section:
<link rel=”icon” type=”image/x-icon” href=”favicon.ico”>
Once you have done that, save your index file and refresh the browser. Hopefully you will see your new favicon!
Fun with JQuery
JQuery plug-in’s are a simple way to add some cool functionality to your website. JQuery is a JavaScript library.
Today we’re going to use a JQuery plug-in to create an interactive photo gallery slider.
What you will need for this lesson:
1- Files from me that include the images and practice code
2- Notepad++
3- A new folder on your computer called JQuery
To begin:
1- Create a folder called JQuery on your computer
2- Get the practice files from me and put them in your folder
3- Open Notepad++
4- Copy and paste the following code into Notepad++
<html>
<head>
<title>JQuery Practice!</title>
</head>
<body>
<p>This will be awesome!</p>
</body>
</html>
5- You can name this jquerypractice.html. Be sure to save this file in the folder you just created.
We’re ready!
Now:
6- Go to http://www.woothemes.com/flexslider/
7- Copy and paste the code from Step 1 into your head section below the title tags. This is the code for the slider style sheet and JavaScript.
8- Grab the code from Step 2 and paste it into your body section below the paragraph tags. You will have to change the names of the images to the ones that you have in your folder.
9- Grab the code from Step 3 and paste it into your head section below your other scripts.
That’s it!
Now:
10- Challenge: either add more images or change the current images to something else
11- Challenge: modify the JQuery to change the slideshow- check out Step 4 and then go here
12- Don’t forget: change the title tag and “this will be awesome”