Thursday, 23 March 2017

Basic structure of HTML document

In this article we will discuss on the HTML basics in simple wordings and make to understand. This is helpful for the pure beginners who just started learning about websites or internet. This tutorial will help you to kick start on creating the html pages and running on your browser.

HTML is abbreviated Hyper Text Markup Language and it is the basic part of standard way of creating the webpages and also web applications. HTML elements are like a skeleton of our body which is a solid basic code which contains all the code. HTML has to be written using the markup language with tags normally we use less than “<” and greater than “>” symbol to represent it. 
Ex: <html>

The above tag contains the html element by enclosing the less than and greater than symbols. 
So the above example shows only to start the element and to close the particular element you should use slash “/” in it.
Ex: <html> </html>
That’s all you need to learn! Yes, you should know when to use and where to use the tags inside. The data you need to add in between the tags. Assume you want write new headings in large font then you can use “h1” tag to specify.
Ex:
<h1>The news headings of the day</h1>

Basic structure of HTML:
<html>
  <head>
    <title></title>
  </head>
  <body>
  </body>
</html>

The basic structure of HTML mainly contains two parts they are Head and Body.
Head: The head part mainly contains the title name for the webpage and Meta data of the web page. 
Body: This is the place where used to display on the web browser

In detail we have showed above as a four sub part. 
1) <html> : It refers the HTML document
2) <head>: It contains the required links and other related Meta data of the web document
3) <title>: Name of the webpage
4) <body>: All your contents which is showed to user 

Now we have bunch of other tags which we can use directly on the body section. Refer the below tags and practice it on your own.
Ex: 
<p>Paragraph</p>
<sub>subscripted</sub>
<h2>Heading</h2>
<strong> important text</strong>
<small> smaller text</small>

Practice : 
<pre>, <input>,  <button>, <textarea>, <sup>, <h6>

Read More

Wednesday, 22 March 2017

Create your own simple HTML website in just 5 min

You are on the internet now and browsing the webpages. Usually we use browser (Chrome, Mozilla, IE Etc.) to view the contents of webpages. The webpage may contain text, images, audio or video as it supports multiple data to show on any client supported browser.

So one might wonder and have these questions in their mind:
How to create a webpage?
What I need to know?
Where do I need to start?

Creating a webpage is as easy as that. Yes, all you need to have is notepad or any other text editor and a web browser (Chrome, Mozilla or IE).

Steps to create a simple webpage:
1) Open a notepad
2) Add the content which is shown below (but not mandatory)
3) Go to File then click on Save As
4) Provide the File name as “index.html” and select Save as type “All Files”
5) At last click on save button
Once you create a file then you need to open with any existing browser in your machine.
In Browser:
That’s great you are done! You have created an empty page which doesn’t contain any text to show on the browser but you can add so much into your file. Check our next page to know basics of HTML, which tells you how to create and add the tags into the file.  
Read More

Friday, 10 March 2017

For You !




☰ Click here
×
Wish You Happy Ugadi To You And Your Family
👇





Read More

Monday, 6 February 2017

jquery to show and hide div content - easy method

Here is a simple script using jQuery library to hide and show the div content. We are using built in function toggle() and if condition to show and hide the content respectively.

<!DOCTYPE html>
<html><head></head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.Add').click(function(){
    $('.hidden', this).toggle();
    if($('.hidden').is(":visible")){
        $('.Add p').text("- close content");
    }
     else 
    {
        $('.Add p').text("+ Open content"); 
    } 
  });
});
</script>
<div class="Add">
    <p>
    + Open content
    </p>
    <div class='hidden' style="display:none;">Here goes your hidden content</div>
</div>
</body>
</html>

Try Output Here :

+ Open content

Read More

JavaScript function to find a character and print the position of it

Here is a script which prints the position of the character in a given string. Here using charAt() built in function to traverse the characters.

<!DOCTYPE html>
<html>
<body>
<lable>Enter the string here : </lable>
 <input type="text" name="enter" id="text" value=""/>
<br/>
<lable>Enter the character to find : </lable>
 <input type="text" name="enter" id="char1" value=""/>
<br/>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() 
{
var str =  document.getElementById('text').value;
var len = str.length;
var mychar = document.getElementById('char1').value;
var k=0;
for(var i=0; i<len;i++)
 {
 search = str.charAt(i);
    if (search == mychar)
    {
     alert("Found at position = " + i);
    }
 }
}
</script>
</body>
</html>

Try Output Here :
Enter the string here :


Enter the character to find :



Read More

Featured post

List of Universities in Karnataka offering M.Sc Computer Science

The post-graduate programme in Computer Science (M.Sc Computer Science) contains two academic years duration and having a four semesters....

Popular Posts

Copyright @ 2011-2016