Tutorials in ‘HTML’ Category

How to force the browser to reload CSS and JavaScript files

When editing the CSS and JavaScript of a site, there is a slight chance that the user may get the old versions, which at best will cause a lot of complains and at worst will cost you a lot of lost customers. The reason for this is that browsers cache static content like CSS and JavaScript. However, telling a browser to reload them is not that hard to do. All it takes is a little trick that will force our friendly browsers into thinking that the CSS and JavaScript are dynamic content.

Before we go on, let us take a look at how we specify the CSS and JavaScript to be used within HTML. Normally we have something in the line of:

<link rel="StyleSheet" type="text/css" href="/static/style.css">
<script src="/static/js/script.js" type="text/javascript"></script>

Where style.css and script.js are our files. Naturally CSS files are specified with the href attribute of the link tag, while JavaScript files are included using the script tag. Now, let’s take a look how we can make our browser reload CSS and JavaScript every time:

<link rel="StyleSheet" type="text/css" href="/static/style.css?version=15">
<script src="/static/js/script.js?version=15" type="text/javascript"></script>

“Now what is that “version”?”, you are probably thinking. Well it’s nothing. No really, it does absolutely nothing. You can use ?favouritesite=onlinehowto.net15 if you want. It would have the absolutely same effect.

“But what does it do?”, you are probably thinking. “This looks just like passing GET variables.” Exactly!

The browser cache uses a pretty complicated mechanism, but there is one thing that you should know for sure index.html?version=14 and index.html?version=15 are two different pages for the browsers, therefore it can’t rely on its cache, therefore it must get them again. But what happens on the server side? Well those arguments are ignored by our server and it simply supplies style.css and script.js.

Whatever language, technology, etc. you are using, you always keep a header file which is included pretty much everywhere so changing the version=<number> part after each revision is pretty easy. You can even make it a part of your site’s logic.

In conclusion, this trick may save you a lot of headaches related to cached CSS and JavaScript, and if you believe you may have some issues, we greatly encourage you to use it!

VN:F [1.9.18_1163]
Rating: 10.0/10 (2 votes cast)

Using The Slider Bar in HTML5

HTML5 is making a solid attempt at providing an easier life for people who build web applications. The “Slider Bar” is a very common user interface control in desktop applications, and has made its way onto the web in a big way in the last few years. It used to be that we’d have to whip up a few lines of JavaScript before we could use one of these sliders in our application, but HTML5 has given us an even more simple solution. We now have the range input type, which provides the end user with a bar to select a value within a specific range. Here’s what a Slider Bar typically looks like when rendered in a browser:

Slider.html

<input type="range" id="sliderBar" min="0" max="100" step="1" value="0"> Let’s take a quick look at the attributes for our input:

1. type – The type of input we’ll be using. In our example, it will be a range input.
2. id – The id of our input, which will help us to target it via JavaScript
3. min – The smallest possible value of our slider bar.
4. max – The maximum value of our slider bar.
5. step – The interval of the values as a percentage. For instance, if we set it to 5 it would go 5,10,15,20, etc. In this case, since it’s set at one, it will count one by one up to 100.
6. value – The default value that we’d like our slider set to.

Writing Some Code

Today, we’ll be using JavaScript and an empty <div> element to display the value of the Slider Bar. You can really do some amazing things with this control, but to demonstrate the basics, we’re just going to have it display some numbers. In part 2, we’ll be using the slider bar to manipulate an element.

So, let’s get started. If you’ve haven’t already added the element to your HTML page, go ahead and do so now. Also, add a <div> element below it with an id of result. You’re HTML5 page should now look like this:

Slider.html

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> HTML5 Slider </title>
<script type="text/javascript"> function showValue(num){ var result = document.getElementById(”result”); result.innerHTML = num; } </script>
</head>
<body>
<input type="range" id="sliderBar" min="0" max="100" step="1" value="0" onChange="showValue(this.value);"/>
<div id="result" style="height:40px;width:40px;border:1px solid #999"></div>
</body>
</html>

Our JavaScript here is fairly simple, and only requires a single function that will take the value of our slider bar, and pass it into the inner HTML of the “result” <div>. Add this bit of JavaScript into the head section of your HTML document:

<script type=”text/javascript”>
function showValue(num){
var result = document.getElementById(‘result’);
result.innerHTML = num;
}
</script>
As you can see, our showValue function takes a number for an argument, and then passes that number into our “result” <div> as HTML. Our last step is to make it so that every time our slider changes in value, it passes the value to the showValue function. To do this, we’ll add an onChange event handler. Change the range input in the HTML code so that it looks like this:

Yes, it is possible to find a good web host. Sometimes it takes a while to find one you are comfortable with. After trying several, we went with Server Intellect and have been very happy thus far. They are by far the most professional, customer service friendly and technically knowledgeable host we’ve found so far.

<input type=”range” id=”sliderBar” min=”0″ max=”100″ step=”1″ value=”0″
onChange="showValue(this.value);"/> Final Thoughts

If you open the HTML file in your browser and use the slider, you’ll see the value of the slider appear in the <div> we created below. This value that you see appearing is being called by JavaScript, and we can later turn that value into whatever we’d like to help us manipulate an element on the page.

For instance, we could say that the value is the width of an element on a page, and make something wider by using the slider, or taller, by using the value as a height attribute. We’ll make heavy use of this element in our next tutorial, so be sure you grasp what’s going on here before moving on. Read the rest of this entry »

VN:F [1.9.18_1163]
Rating: 0.3/10 (11 votes cast)

Using HTML lists

Every webpage – from the simplest to the most complex one has lists in it. Using HTML you can create both ordered and unordered lists: Read the rest of this entry »

VN:F [1.9.18_1163]
Rating: 0.0/10 (0 votes cast)

HTML Tutorial (Part 3)

We will continue our HTML-Tutorial (Part 2).

HTML lines

You can easily create a horizontal line like this: Read the rest of this entry »

VN:F [1.9.18_1163]
Rating: 0.0/10 (10 votes cast)

HTML Tutorial (Part 2)

We will continue our HTML-Tutorial (Part 1).

In this lesson you will learn more about HTML properties, titles, paragraphs, formatting, links, styles and other things.

Let”s begin!

HTML titles

The headings are defined by a tag to <h1>….<h6> as <h1> displayed the greatest title, but <h6> at least.

Example: Read the rest of this entry »

VN:F [1.9.18_1163]
Rating: 0.0/10 (10 votes cast)

HTML Tutorial (Part 1)

HTML is a language for creating Web pages

– HTML stands for Hypertext Markup Language
– HTML is not programming language
– HTML tags used so-called to describe web pages

HTML tags are keywords surrounded by angle brackets.
Tags indicate what action the browser to display.Te are two types:

– opening
– closing

each opening tag has a corresponding closing. Tags must be closed in the order in which they open. Read the rest of this entry »

VN:F [1.9.18_1163]
Rating: 0.0/10 (10 votes cast)