Wednesday, 13 June 2018

About JavaScript & CSS3 in HTML

About Javascript:
Javascript is a client side scripting language. It is embedded into HTML coding likewise CSS. As there are many browsers with certain rendering differences in them. The javascript balances the display of webpage on several web browsers. Javascript make use of browsers commands them to do certain work on the live webpage. If user wants to change /replcae the webpage image to display it on  user side, he/she will do javascripting on the webpage code. Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content.
Javascript has gained popularity not only in clientside scripting but also in sever side scripting as well.
Javascript must be scripted using <script>..</script> tags inside<body>..</body> tags of HTML. Script tags holds scripting statements, methods or points to external scripting file using src attribute.

Code:
<!DOCTYPE html>
<html>
<head>
<p id="sample"></p>
<script>
document.getElementById("sample").innerHTML = "Hello I'm JavaScript!";
</script>

<title>Page title</title>
</head>
<body>
<h1>This is a heading1</h1>
<h2>This is a heading2</h2>
<h3>This is a heading3</h3>
<h4>This is a heading4</h4>
<h5>This is a heading5</h5>
<h6>This is a heading6</h6>
<p>This is a paragraph.</p><br>
<p>This is another paragraph.</p>
</body>
</html>
<!-- These are Basic HTML5 Tag with JavaScript-->
Output:

About CSS:
The CSS is abbreviation for Cascading Style Sheets. CSS3 is the latest version of CSS originals. CSS brings out the beauty on the basic web page structure ie.HTML document. CSS coding in the HTML document gives web page a good repesentation and awesome look. CSS has ability to enhance the look of HTML page by adding values to several properties like color,size,font-family,etc on the  elements of HTML document.
In HTML code, the CSS code must be implemented inside the <style>...</style> tags of html.
<style>...</style> tags should be placed after the <head> tag.
To get the quick visual understanding of the importance of CSS on HTML, take a glance a this funny example!

Basic HTML structure vs CSS+HTML
CSS implementation into HTML:
<!DOCTYPE html>
<html>
<head>

<style>
body {
    background-color: lightblue;
}
h1 {
    color: white;
    text-align: center;
}
p {
    font-family: verdana;
    font-size: 20px;
}
</style>

<title>Page title</title>
</head>
<body>
<h1>This is a heading1</h1>
<h2>This is a heading2</h2>
<h3>This is a heading3</h3>
<h4>This is a heading4</h4>
<h5>This is a heading5</h5>
<h6>This is a heading6</h6>
<p>This is a paragraph.</p><br>
<p>This is another paragraph.</p>
</body>
</html>
<!-- These are Basic HTML5 Tag with CSS3-->
Output page:

No comments:

Post a Comment