The title, description and tags are viable to SEO. Search engines use these to help match your site with searches. Most site builders offer completely customized title, description and tags but you need to add these manually in HTML, PHP, and other manually edited documents. The code is inserted into the <head> and </head> tags:
<TITLE>My Site's Title</TITLE>
<meta name="keywords" content="Separate keywords with commas.">
<meta name="description" content="My site's description, two or three sentences.">
<meta name="author" content="Your Name">
A well formed head tag will follow this format:
<head>
<TITLE>My Site's Title</TITLE>
<meta name="keywords" content="Separate keywords with commas.">
<meta name="description" content="My site's description, two or three sentences.">
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<meta http-equiv="refresh" content="100">
<link rel="Shortcut Icon" href="/favicon.ico">
</head>
For more <head> tags see all posts with the label head. You may omit the meta tags about keyword and description. You may omit any of these <head> tags.
Showing posts with label stylesheets. Show all posts
Showing posts with label stylesheets. Show all posts
Sunday, October 28, 2012
Thursday, October 25, 2012
Links, part 3: Colors & CSS
In a previous post I explained the link. In this post I will go into how to change link colors, add hover effects and visited colors. The first will be changing the link colors by some basic HTML in the body. Insert this code between the <body> and </body> tags.
<body link="#C0C0C0" vlink="#808080" alink="#FF0000">
body link is when the link is displayed on the page. #COCOCO is the blue you see everywhere. vlink is the visited color. #808080 is the purple you see on most pages when you revisit a page after clicking a link. #FF0000 is red, and alink is the hover color.
Link color in your CSS stylesheet
Its easy, and you can do even more, like making a link suddenly underline when hovered over. Here's the code:
a.nav:link {color: blue; text-decoration: none; }
a.nav:visited {color: purple; text-decoration: none; }
a.nav:hover {color: green; text-decoration: underline; }
a.nav:active {color: red; }
Multiple Link effects through CSS stylesheet
You can make "classes" of link effects in CSS that will make links in each class act differently. For example, you could make a class called nav for links in the body, and a class called foot for links in the footer. Here is the code:
a.nav:link {color: blue; text-decoration: none; }
a.nav:visited {color: purple; text-decoration: none; }
a.nav:hover {color: green; text-decoration: underline; }
a.nav:active {color: red; }
a.foot:link {color: red; font-size: 14pt; font-weight: bold; }
a.foot:visited {color: green; font-weight: bold; }
a.foot:hover {text-decoration: underline; background-color: blue; }
a.foot:active {color: orange; }Using the classes
It's much simpler than individually changing every link that you want different from the settings you put.
For the class nav use this code: <a href="URL" class="nav">Link Text</a>
For the class foot use this code: <a href="URL" class="nav">Link Text</a>
<body link="#C0C0C0" vlink="#808080" alink="#FF0000">
body link is when the link is displayed on the page. #COCOCO is the blue you see everywhere. vlink is the visited color. #808080 is the purple you see on most pages when you revisit a page after clicking a link. #FF0000 is red, and alink is the hover color.
Link color in your CSS stylesheet
Its easy, and you can do even more, like making a link suddenly underline when hovered over. Here's the code:
a.nav:link {color: blue; text-decoration: none; }
a.nav:visited {color: purple; text-decoration: none; }
a.nav:hover {color: green; text-decoration: underline; }
a.nav:active {color: red; }
Multiple Link effects through CSS stylesheet
You can make "classes" of link effects in CSS that will make links in each class act differently. For example, you could make a class called nav for links in the body, and a class called foot for links in the footer. Here is the code:
a.nav:link {color: blue; text-decoration: none; }
a.nav:visited {color: purple; text-decoration: none; }
a.nav:hover {color: green; text-decoration: underline; }
a.nav:active {color: red; }
a.foot:link {color: red; font-size: 14pt; font-weight: bold; }
a.foot:visited {color: green; font-weight: bold; }
a.foot:hover {text-decoration: underline; background-color: blue; }
a.foot:active {color: orange; }Using the classes
It's much simpler than individually changing every link that you want different from the settings you put.
For the class nav use this code: <a href="URL" class="nav">Link Text</a>
For the class foot use this code: <a href="URL" class="nav">Link Text</a>
Monday, October 22, 2012
CSS Stylesheets or Syncing Webpages Easily
Css was made to save time. If you have a site where you want all the background colors, links, text, link hover colors and stuff like that to be the same on all pages, CSS stylesheets are the quickest way to do that. In fact, CSS stands for Cascading Style Sheets.
1. Open notepad or any plain-text editor. Enter this code: Highlighted text is for you to change.
1. Open notepad or any plain-text editor. Enter this code: Highlighted text is for you to change.
h3
{
color:black;
text-align:left;
font-size:8pt;
}
{
color:black;
text-align:left;
font-size:8pt;
}
Now for the Background. Remember, multiple styles cascade into one style.
body {background-color:#FFFFFF;}
You could also use an image background. This is for positioning an image in the top right corner.:
body
{
background-image:url('image_URL');
background-repeat:no-repeat;
background-position:right top;
}
{
background-image:url('image_URL');
background-repeat:no-repeat;
background-position:right top;
}
If you want the image to repeat the whole length of the page:
body
{
background-image:url('image_URL.png');
background-repeat:repeat-x;
}
{
background-image:url('image_URL.png');
background-repeat:repeat-x;
}
Save as "Stylesheet.css"
2.Adding the style sheet to webpages. Insert this code between the <head> AND </HEAD> tags. This is where the <TITLE> tag is.
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
Subscribe to:
Posts (Atom)
