External Style Sheet
If you need to use your style sheet to various pages, then its always recommended to define a common style sheet in a separate file. A cascading style sheet file will have extension as .css and it will be included in HTML files using <link> tag.Example
Consider we define a style sheet file style.css which has following rules:.red{
color: red;
}
.thick{
font-size:20px;
}
.green{
color:green;
}
Here we defined three CSS rules which will be applicable to three
different classes defined for the HTML tags. I suggest you should not
bother about how these rules are being defined because you will learn
them while studying CSS. Now let's make use of the above external CSS
file in our following HTML document:<!DOCTYPE html>
<html>
<head>
<title>HTML External CSS</title>
<link rel="stylesheet" type="text/css" href="/html/style.css">
</head>
<body>
<p class="red">This is red</p>
<p class="thick">This is thick</p>
<p class="green">This is green</p>
<p class="thick green">This is thick and green</p>
</body>
</html>
This will produce following result:
This is red
This is thick
This is green
This is thick and green
External Javascript
If you are going to define a functionality which will be used in various HTML documents then it's better to keep that functionality in a separate Javascript file and then include that file in your HTML documents. A Javascript file will have extension as .js and it will be included in HTML files using <script> tag.Example
Consider we define a small function using Javascript in script.js which has following code:function Hello()
{
alert("Hello, World");
}
Now let's make use of the above external Javascript file in our following HTML document:<!DOCTYPE html>
<html>
<head>
<title>Javascript External Script</title>
<script src="/html/script.js" type="text/javascript"/></script>
</head>
<body>
<input type="button" onclick="Hello();" name="ok" value="Click Me" />
</body>
</html>
This will produce following result, where you can try to click on the given button:Internal Script
You can write your script code directly into your HTML document. Usually we keep script code in header of the document using <script> tag, otherwise there is no restriction and you can put your source code anywhere in the document but inside <script> tag.Example
<!DOCTYPE html>
<html>
<head>
<title>Javascript Internal Script</title>
<base href="http://www.tutorialspoint.com/" />
<script type="text/javascript">
function Hello(){
alert("Hello, World");
}
</script>
</head>
<body>
<input type="button" onclick="Hello();" name="ok" value="Click Me" />
</body>
</html>
This will produce following result, where you can try to click on the given button:
0 comments:
Post a Comment