Seth's Code and PC tutorials: October 2012

Tuesday, October 30, 2012

Special Symbols ¢, ™, ® and others

Trademark, copyright, and other symbols may be displayed in webpages by way of simple HTML code. Here they are:

® ®
¢ ¢
™ ™
¿ ¿
© ©
÷ ÷
§ §
¥ ¥
£ £
€ €
µ µ
¶ ¶
± ±
· ·

How to display this chart with the codes:
</span>®      &reg;<br />
¢       &cent;  <br />
™      &trade;<br />
¿       &iquest;<br />
©      &copy;<br />
÷      &divide;<br />
§       &sect;<br />
¥       &yen;<br />
£       &pound;<br />
€       &euro;<br />
µ       &micro;<br />
¶       &para;<br />
±       &plusmn; <br />
·        &middot;<br />
  <br />

Monday, October 29, 2012

Make Google Custom Search results open in same tab

One of the problems I had with GCSE on my blog was that it always opened links in a new window or tab. This wasn't very convenient, but I only had to change a little code in the results code.
Before Modification:


<script>
(function() {
var cx = '010940491106818468665:ak7ru-numse';
var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//' + cx;
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s);
})();
</script>


<gcse:searchresults-only></gcse:searchresults-only>

After Modification (when the results open in same tab):


<script>
(function() {
var cx = '010940491106818468665:ak7ru-numse';
var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//' + cx;
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s);
})();
</script>


<gcse:searchresults-only linktarget="_parent"></gcse:searchresults-only>

I replaced <gcse:searchresults-only> with <gcse:searchresults-only linktarget="_parent">.

Sunday, October 28, 2012

Site Title, Description & Tags in HTML

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.

Two page, more customizable GCSE for Blogger

Google Custom Search is a powerful tool to search websites. You can get a Blog search from the layout and gadgets section of Blogger.The downside of this is that it isn't that customizable. This will show you how to add your own GCSE to Blogger and have a separate page for results. It's simple.

Log into Blogger, and select "pages" of the blog you want to add search too. Make sure its set to "don't show pages." Then create a new page and name it "search" or "search results." When the editor comes up click publish and go back to page list. Click "view" and copy the URL. The page section should look like the image at left. Go to Google Custom Search and click "make new search engine."

In "name" enter any thing, and in "sites" enter the URL of your blog. Make sure you select the free option and that you agree to the terms of use. Click next, choose a style, which you can customize. Then click next. DO NOT COPY THE CODE. Go to the sites tab and exclude the URL of your search results page.

Then go to "look and feel" and select the "two page" option.

Then click "save and get code." In the box where it tells you to specify the URL where the search results are to appear, enter the URL of "search" or "search results."

Copy the code. Go to blogger, then go to "pages" of the blog you are adding search to, and click edit. When you get the code you will have to remove some of it for cross browser compatibility so it will work with Firefox and Opera. This is the search results code. The text highlighted in red you must remove:

<script>
(function() {
var cx = 'Your Search Engines ID:ak7ru-numse';
var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s);
})();
</script>


<gcse:searchresults-only></gcse:searchresults-only>

CLick HTML in the post editor and paste the code there. It should look like this:

Click save. Now go to layout, and click "add gadget." Paste the code for the search box there, click save and you're set!

Friday, October 26, 2012

images: HTML

Images are so easy. There are all sorts of things you can do with images in HTML. The basic code is:
<img src="image url">
The most popular code customizes what you see when the image can't load, or images are disabled in the browser. Here it is:

<img src="image url" alt="tag">

tag is the text that's displayed when the image doesn't load or images are disabled. Sometimes search engines use it to define image search.

Defining the width and hight
If you want to change the size of the image, you may tell the browser how to size it:

<img src="image URL" alt="tag" width="400" height="400">

Customizing the border
You can create a border around images with a simple code. This is not in HTML 5 so I'll post about images in CSS later.

<img src="image URL" alt="tag" border="5">

or you could use this code:

<img src="image URL" alt="tag" width="400" height="400" border="5">

lots of HTML image attributes are deprecated in HTML 5. Luckily, CSS provides these and so much more. In the future, use CSS for your image effects.

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>

Links, Part 1: The basic link

Links are an almost irremovable part of a site or even a page. Links are used to lead to other pages, other sites, even emails. Fortunately, links are very easy. In this post I will go over the hyperlink, the email link and the image link. The basic link code is <a href="http://sethstutorials.blogspot.com">Seth's Code & PC Tutorials</a> Replace with http://sethstutorials.blogspot.com with the address of the site you want to link to. Replace Seth's Code & PC Tutorials with the text you want your links to display.

Email Link

The email link is simple. The code is:
<a href="mailto:sethsevenyoln@aol.com">Email Me</a>
Replace sethsevenyoln@aol.com with your email address, and Email Me with the text you want displayed.
Image Link

The image link is a bit more complicated. Still, its quite possible. The code is:
<a href="http://fireburst.webs.com"><img src="image.gif" border="0"></a>

Replace http://fireburst.webs.com with the URL of the site you want to link to, and image.gif with the URL of the image you want displayed.

Opening a link in a new tab

If you want a link to be opened in a new tab, for the basic link use this code:

<a href="http://url" target="_blank">link text</a>

HTML Video: Part 2

I already wrote a post on HTML5 video. This expands on it and explains things like auto play.
Master Code + controls = auto play, loop

To add loop, auto play and "poster" or image that's shown when the video first loads, use this code:
<video poster="thumbnail.png" autoplay loop controls tabindex="0">
<source src="vide.webm" type="video/webm"; codecs="vp8, vorbis" />
<source src="video.mp4" type="video/mp4"; codecs="theora, vorbis" />
</video>

Replace thumbnail.png with the URL of the pic you want to display when the video is first loaded, video.webm with the URL of the webm version of your video, video.mp4 with the URL of the mp4 version of your video. The autoplay and loop controls set what they sound like: autoplay making the video play upon loading and loop making the video repeat. More on HTML5 video is available at my former post.

Desktop

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
HTML5 video	20.0	12.0	9.0	12.0	5.1

Tuesday, October 23, 2012

How to tell users IE is incompatible

Internet Explorer is Microsoft's web browser. It's the second most popular in the world, but unfortunately, its web standard support is extremely limited. Fortunately, its easy to tell users to upgrade.
For IE6
IE 6 supports almost nothing, so don't be afraid to tell users to upgrade. It doesn't support Google CSE, or any advanced CSS. Here's how to tell users to upgrade IE 6. I know it says IE 7, but it won't do any warnings in IE 7. Insert this code between the <head> and </head> tags.



For All Versions of IE NOT RECOMMENDED.

Insert between the <head> and </head> tags

How to verify a Blogger blog with Bing Webmaster Tools

Bing webmaster tools gives you data about your site or blog's performance on Bing. However, verifying a Blogger blog with Bing can be tricky. Here's how.
1. Navigate to http://bing.com/webmaster and click sign in. Log in with your Microsoft of Windows Live account (you can sign up here).

Once you're signed in, enter the URL of your Blogger blog.

It will lead you to this page. Click "add" and don't bother with a sitemap. After all, its a blog.

You'll get something like this:

Now go to Blogger and navigate to the "Template" section.

Select "Edit HTML" and don't worry! When you see this click "proceed"

Scroll to the very bottom. You will see this:

At the very bottom, paste the code from Bing Webmaster Tools right before </html> tag.

Click "save template." Go back to Bing Webmaster Tools and click "verify." You're set. If it doesn't work , try a new post. Or figure out a way to upload a file that I don't know of.

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.

h3
{
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;
}

If you want the image to repeat the whole length of the page:

body
{
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.

Pages