BASIC HTML

Table of Contents

In this section you see some basic html so that you can relate, how web page created for IoT dashboard.

EXAMPLE 1

Create a html file say “index.html” using  Notepad, Notepad++ or any other editor and write this code. In this code, we use tags <h1>, <h2> and <p> other than required tags for html which includes <html>, <head> & <body>.

We write our web page content inside <body> tag while <head> tag is used for styling, designing and script.

<html>
<head>
</head>
<body>
  <h1>This is Heading one</h1>
  <h2>This is Heading two</h2>
  <p>This is paragraph: A paragraph is a series of related sentences developing a central idea, called the topic. Try to think about paragraphs in terms of thematic unity: a paragraph is a sentence or a group of sentences that supports one central, unified idea. Paragraphs add one idea at a time to your broader argument.</p>
</body>
</html>

OUTPUT

Basic html

EXAMPLE 2

In this we will use some CSS to make our dashboard colorful, You know we use <head> to style our <body> part. For this we have a tag called <style>. See the example code below.

All the heading with with tag <h1> in this “index.html” will appear as red in color and in Times New Roman font, you can change these and add more properties to it. Heading with tag <h2> will be of green in color and paragraph with tag <p> will be in blue color.

<html>
<head>
<style>
  h1 {
    color: red;
    font-family: Times New Roman;
  }
  h2 {
    color: green;
  }
  p {
    color: blue;
  }
</style>

</head>
<body>
  <h1>This is Heading one</h1>
  <h2>This is Heading two</h2>
  <p>This is paragraph: A paragraph is a series of related sentences developing a central idea, called the topic. Try to think about paragraphs in terms of thematic unity: a paragraph is a sentence or a group of sentences that supports one central, unified idea. Paragraphs add one idea at a time to your broader argument.</p>
</body>
</html>

OUTPUT

basic html with css

EXAMPLE 3

Now we will add another tag <form>, as name implies form, it is similar to normal form you fill. In form there are different fields where you write information. For example username and password.

Form has two method one is GET and other is POST.

GET Method

By default form use GET method. Here you can see we use new tags

    • <form>
    • <input>
    • <br>

Here type, name and value are attribute name and text, uname, password, pass, submit, SUBMIT are attribute values. (Range of attributes for tags available in html)

<html>
<head>
</head>
<body>
  <form>
    Name: <input type="text" name="uname"> </input>
    Password: <input type="password" name="pass"> </input> <br/>
    <input type="submit" value="SUBMIT"></input>
  </form>

</body>
</html>

OUTPUT

Form before submit – check URL

html form before submit

Form after submit – check URL.

html form after submit

Check form and input field attribute  name and its attribute value, Here you can see “uname” field value is Mahendra and “pass” field value is 1234.

As it is GET method you can see this is URL but in POST method it is not visible.

So we can say if we hit the same URL say “C:/Users/Bhushan/Desktop/index.html?uname=Mahendra&pass=1234”, It means we are submitting form without writing to field.

POST Method

POST method is used for getting secure information like password and for images. GET method has some limitation which overcome by POST method

<html>
<head>
</head>
<body>
  <form method="POST">
    Name: <input type="text" name="uname"> </input>
    Password: <input type="password" name="pass"> </input> <br/>
    <input type="submit" value="SUBMIT"></input>
  </form>

</body>
</html>

OUTPUT

form post method
Click to Enlarge

This is just to make you understand basic working of html and form in html. More than this we can add script, using PHP, Java Script etc. Because html alone is not capable of doing all things alone like calculation, getting data from user to store in file or data base and many more things.