Saturday, 17 March 2018

How to insert symbol in your webpage

Revise, what you did in earlier chapters in HTML5.

Now, learn how to insert symbol in your webpage :

<html>
<head><title>My Website</title>
</head>
<body>
<h1>Top section of the page</h1>
<h2>Main Section of the page</h2>
<p>Paragraph - write something about your 
website or your product.</p>
<h3>Insert the image about your product.</h3>
<img src="girl_clip.png">
<h3>Footer</h3>
This is the footer section of your webpage - &copy; www.jaangla.com&trade;
</body>
</html>


You have to use (&) ampersand symbol and write copy then (;) semicolon like this - &copy;
Please comment if find any problem in comment box.

drop down menu or select tag coding in html

Drop down menu or select tag coding in html

For making drop down menu or select tag coding in html 5 is give below to make your form much more better.
  • Be careful, see where tag starts and where closes.
select tag - drop down menu in html
drop down menu in html
<html>
<head>
<title>My Website</title>
</head>
<body bgcolor="white">
<form>
<fieldset>
<legend>Choose one : </legend>
Your Age :
<p>
<select>
<option>Below 18 years</option>
<option>Above 18 years</option>
<option>Above 40 years</option>
<option>Above 60 years</option>
</select>
</p>
<label>Comments</label>
<textarea></textarea></p>
<input type="submit" value="Click Here to Submit" />
</fieldset>
</form>
</body>
</html>
Please comment if find any problem.

alignment in html with quick view on css

Alignment in html with quick view on css





Without CSS3, HTML5 is not yet perfect programming language to make the webpage perfectly aligned. For the alignment of the web pages we have to use the CSS language. We are here using it in HTML coding, otherwise we have to give a file name for css coding in <head> </head> tag of html and the .css file will be written and placed on another place. For beginners it is perfect way to understand what is going on in html and what are the changed made by using css3 coding.

alignment in html and quick view on css
alignment in html with css


See the html coding and css coding together :
<html>
<head>
<title>My Webpage</title></head>
<style>
body {background: yellow;}
h2 {background: pink; text-align: center;}
p {background: white; font-size: 12px; text-align: right;}
footer {background: green; font-size: 8px; text-align: center; color: white;}
div {background: pink; font-size: 7px; text-align: center;}
</style>
<body>
<h2>Background color and text alignment <br />
using HTML and CSS together </h2>
<p>This is the main body of the page, <br />
You can write any description or add <br />
the photograph, video or music <br />
and with the help of css (cascading style sheet) <br />
give the page a better look.<br />
See previous chapters, if find any difficulty in HTML tags <br/>
Link is :
http://www.jaangla.com </p>
<footer>This is our email id .......... and this is phone number ........</footer> <br />
<div>Please subscribe the channel while watching video on youtube. Thanks. </div>
</body>
</html>


Output is given below: 

html and css tutorial background color and alignment
html and css tutorial for alignment

Try to use in your text editor and check it in your web browser. 
Please comment in comment box, if find any problem regarding this coding.

Start Cascading Style Sheet CSS with HTML

Cascading Style Sheet (CSS3) with HTML5

CSS 3 is another language is used to make your HTML5 page colourful, handles alignments and a lot more. Here is a little introduction for absolute beginners who would understand a little about this. It will always be written in <head> </head> section of HTML coding.

Here is the coding and its output which will be shown on your web browser.

learning html and css tutorial for beginners
learning html and css tutorial for beginners, out of the coding given below.


<html>
<head>
<title>My Webpage</title>
<style>
body { background: yellow; }
</style>
<body>
This is first page of your website<br />
using HTML and CSS together.
</body>
</html>
Write comments in comment box if find any difficulty.

coding of Inserting Video in HTML for Your Website

Coding of Inserting Video in HTML for Your Website



inserting video in html


inserting video in HTML5
inserting video on your webpage


After a quick revision, let us go ahead, and try to understand the remaining terms for HTML5 programming. Let us learn how to add video on your webpage. In Chapter-24, we tried to understand the table, and revise that.

Now we are revising the previous chapters and making a whole web page as well as inserting the video on our webpage. For this, have a quick look on coding and <video> </video> tag.
The output for the coding is given here, you must try and try on your web browser to make the HTML 5 programming easy.

<html>
<head>
<title>My Website</title>
</head>
<body bgcolor="grey">
<h1>My WebSite</h1>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="fruits.html">Description</a></li>
<li><a href="flowers.html">Flowers</a></li>
<li><a href="today.html">Today's Price</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
<p>
<img src="plant.png" width="200" height="150" /><br /><br />
<img src="app.png" width="200" height="150" /><br />
</p>
<p>
We sell high quality fresh fruits and flower. <br />
For any inconvenience, please send us <br />email by means of filling the form
given below:
</p>
<p>
<video controls="controls" height="150">
<source src="drivingkid.mp4">
</video>
</p>
<form>
<fieldset>
<legend>Contact us: </legend>
<p>Your Name : <input type="text" /></p>
<p>Email : <input type="email" /></p>
<p><input type="reset" /> <input type="submit" /></p>
</fieldset>
</form>
<p><footer>Our Email : info@jaangla.com  Phone Number : 00000 etc.
etc.</p>
</footer>
</body>
</html>

  • Remember : 
    • If you have not updated web browser, it would not work properly in older browser.
    • Starting the tag and closing must be remembered carefully.
start off coding for website how to make programming is a part of form html by which a single choice can be chosen from many options in this tutorials of website designing or webpage design, what is html? how to create website, website design web design, You can use notepad of windows or notepad++ for writing the codes for html and css, how to make website using html and css, introduction to html programming in very easy and simple way from basic and starting. In notepad++ you can type your code and click on file menu and save as sub menu and change normal text file (*.txt) option to (HTML) Hyper Text Markup Language file (*.html) or before starting to type your code click on to language menu, find the first letter of your language in which you want to type your coding, click H submenu and select HTML language there, it will now work as a default language for your software and while you will save your file, the software will automatically choose Hyper Text Markup Language file (*.html).

There are two types of website, first is static website where no JavaScript or php is used in the coding, second is dynamic where server side programming such as php or other language is used and the client side script like JavaScript or other language is also used, third is sql language which is used for server side database management, but all the three languages which we are discussed used in dynamic websites not in static websites, both static and dynamic websites or webpages uses html - hypertext markup language and css - cascading style sheet which are primary languages for making webpage or website and necessary for both static and dynamic webpages or websites both, so have to start from html later css and later other languages to learn.
    Please comment, if find any problem in this HTML5 coding.

    practicing table formatting in html with coding and example

    Practicing table formatting in html with coding and example

    We are now revise what we learnt about HTML5. It would be a little confusing for the beginner, but we are trying not make it confusing. Here you would meet some new terms like table bgcolor, colspan, height and width of image etc. 

    table bgcolor is the same as we earlier put in <body bgcolor="">. Here we are trying to do all in table that's why we are emphasizing <table bgcolor=""> etc.
    • You are now getting familiar to colspan attribute in table. colspan="whatever number" means you are merging all columns into one column i.e. here we are using three columns in the table. We need only one column for writing text, so we merged all the three columns in one column. If we don't merge it, both the columns would go outside from the rest of the table and the symmetry of the table would be dis-balanced. You can try without colspan and see the result in your web browser.
    • Next terms is align, you know there are left, center, right, top or bottom alignment are used. Just try to use right alignment in this table. You can change in your HTML5 Coding and see the result of alignment in your web browser.
    • Next term is used here is the height and width of the image, see HTML5 Coding written below and its result too. You are free to change increase or decrease the size of width and height of the image in your coding while practicing and see the result in your web browser.



    table in HTML
    table in HTML


    <html>
    <head>
    <title>My Website</title>
    </head>
    <body>
    <table bgcolor="pink">
    <tr>
    <td colspan="2" align="right">My Website</td>
    <td><img src="girl_clip.png" width="50" height="20" /></td>
    </tr>
    <tr>
    <td><a href="index.html">Home </a></td>
    <td><a href="desc.html">Description</a></td>
    <td><a href="otherlink.html">Other Link</a></td>
    </tr>
    <tr>
    <td colspan="3">This is about our website.
    We sell fruits and flower.</td>
    </tr>
    <tr>
    <td><img src="app.png" width="150" height="100" /></td>
    <td><img src="lotus.png" width="150" height="100"/></td>
    <td><img src="plant.png" width="150" height="100"/></td>
    </tr>
    <tr align="center">
    <td colspan="3">Your web address is www.jaangla.com Tel.:0000000 etc. etc.</td>
    </tr>
    <table>
    </body>
    </html>
    • Again remember, from where the tags are started and where these are closed should rightly be followed. 
    • Try to study previous chapter if you are not properly understand this chapter.
    Please comment if any problem regarding HTML Programming till now.

    Datepicker in html quick and easy tutorial

    Datepicker in html quick and easy tutorial

    Many times you have seen a date-picker during the submission of form. This is the time to learn how to add datepicker in HTML5 and be more smart and confident.

    datepicker in HTML
    datepicker in HTML5

    <html>
    <head>
    <title>My Website</title>
    </head>
    <body>
    <form>
    <fieldset>
    <legend>Fill the Form : </legend>
    Your Name :
    <input type="text" /> <br /><br />
    Your Date of Birth : <br /><br />
    <input type="date" />
    <p>
    <input type="submit" value="SUBMIT"></p>
    </fieldset>
    </form>
    </body>
    </html>
    Please comment if any problem in comment box.

    making rest button in html

    Some times it happens when we unknowingly fill something wrong in the form, the reset button if clicked as mentioned in its name clears all data filled by you. Form becomes blank and you can fill the new or corrected data in the form on your webpage.

    Let us see the coding in HTML5 and output image placed below :


    reset in HTML
    Reset Button


    <html>
    <head>
    <title>My Website</title>
    </head>
    <body>
    <form>
    <fieldset>
    <legend>Fill the Form : </legend>

    Your Name :
    <input type="text" /> <br /><br />
    Upload Your Photograph : <br /><br />
    <input type="file" /> <br /><br />
    <input type="reset" />
    <p>
    <input type="submit" value="SUBMIT"></p>
    </fieldset>
    </form>
    </body>
    </html>
    • Here we are using <br /> tag two times to make more gap (two lines gap) between two lines.
    • Again, try to understand where tags start and closes.
    start off coding for website how to make programming is a part of form html by which a single choice can be chosen from many options in this tutorials of website designing or webpage design, what is html? how to create website, website design web design, You can use notepad of windows or notepad++ for writing the codes for html and css, how to make website using html and css, introduction to html programming in very easy and simple way from basic and starting. In notepad++ you can type your code and click on file menu and save as sub menu and change normal text file (*.txt) option to (HTML) Hyper Text Markup Language file (*.html) or before starting to type your code click on to language menu, find the first letter of your language in which you want to type your coding, click H submenu and select HTML language there, it will now work as a default language for your software and while you will save your file, the software will automatically choose Hyper Text Markup Language file (*.html).

    There are two types of website, first is static website where no JavaScript or php is used in the coding, second is dynamic where server side programming such as php or other language is used and the client side script like JavaScript or other language is also used, third is sql language which is used for server side database management, but all the three languages which we are discussed used in dynamic websites not in static websites, both static and dynamic websites or webpages uses html - hypertext markup language and css - cascading style sheet which are primary languages for making webpage or website and necessary for both static and dynamic webpages or websites both, so have to start from html later css and later other languages to learn.
      Write comment in comment box, if any doubt.

      html tutorials how files are uploaded from your computer to webpage ?

      Have you ever imagine how files are uploaded from your computer to webpage ? 

      Use input type file in your HTML5 Coding. Just try in your computer's notepad and see the output, what happens when you click on Choose File button on your web browser, do practice and see the result for your lovely webpage.

      uploading file in HTML

      <html>
      <head>
      <title>My Website</title>
      </head>
      <body>
      <form>
      <fieldset>
      <legend>Upload Your Photograph : </legend>
      <input type="file" />
      <p>
      <input type="submit" value="SUBMIT"></p>
      </fieldset>
      </form>
      </body>
      </html>

      Please comment if find any problem.

      Checkbox creation in html

      Checkbox creation in html

      In this chapter we are learning about input type - checkbox. Let us see the HTML code written below. The output is in the following figure :

      checkbox in HTML
      checkbox in HTML5

      • Here <br /> means Line Break.
      • <p> Paragraph Start and </p> Paragraph end.

      <html>
      <head>
      <title>My Website</title>
      </head>
      <body>
      <form>
      <input type="checkbox" />First Term<br />
      <input type="checkbox" />Second Term<br />
      <input type="checkbox"/>Third Term <br />
      <p>
      <input type="submit" value="SUBMIT"></p>
      </form>
      </body>
      </html>

      Please write in comment box, if find any problem.

      ordered list and unordered list in html with headings and background color

      Now use heading for your web page to make it more attractive in html5 :
      Go to previous chapters coding and add a little more, written as in blue:
      The heading are h1, h2, h3, h4, h5, h6. Just try in we browser.
      <html>
      <head><title>My Website</title>
      </head>
      <body bgcolor="pink">
      <p>This is first line of your website. or Paragraph</p>
      </p>This is the second line. or paragraph</p>

      <h1>This is unordered List</h1>
      <ul>
      <li>Flowers</li>
      <li>Clothes</li>
      <li>Shoes</li>
      <li> Jug</li>
      <li> Bucket</li>
      </ul>

      <h2>This is ordered list</h2>
      <ol>
      <li>Flowers</li>
      <li>Clothes</li>
      <li>Shoes</li>
      <li> Jug</li>
      <li> Bucket</li>
      </ol>

      ordered list and unordered list in html
      </body>
      </html>


      Write comments in comment box.

      numeric spin box in html tooltip in html using notepad++

      Till now you tried to use input type as text, now try to use input type number in html5, you will see numeric spin box in your browser for your web page in html programming. The code is given below :


      numeric spin box


      <html>
      <head>
      <title>My Website</title>
      </head>
      <body bgcolor="grey">
      <form>
      <fieldset>
      <legend>Select : </legend>
      <p><lable>Participated for this competition : 
      <input type="number" /> times.
      </label>
      </p>
      <input type="submit" value="Click Here to Submit" />
      </fieldset>
      </form>
      </body>
      </html>

      Please comment if find any problem.

      hover over in html with css

      hover over in html 

      This is for a:link a:visited a:active a:hover in css with HTML for the formation of navigation bar.
      As the very essential part of a web designing, without this technique, all link will seem similar to the user who visits your site will be unable to recognize the links which he has seen and which one will be next to click. Analyze the other web sites, see the link carefully before click and after click, and also see the navigation menu whether the link changes the color or style or not.



      a:link will is referred as such page is not clicked yet.
      a:visited is referred as clicked the link and visited on such page.
      a:hover is referred as the link on which pointer is floating over such link.
      a:active is referred as the link on which you are about to click on such link.


      hover link visited active  in css with HTML for website tutorial learning html and css
      a:link a:visited a:active a:hover in css with HTML for website tutorial learning html and css

      For your comfort, a link is given below for video tutorial to make the topic more easy. 

      The code is given below :

      <html>
      <head>
      <title>Your WebSite</title>
      </head>
      <style>
      top {background: black; color: white; float: right; width:100%;}
      a:link {text-decoration: none; font-family: arial; font-size: 12px; }
      a:visited {color: green;}
      a:active {color: black; font-size: 20px;}
      a:hover {background: black; color: white; width: 100%;}
      footer {background: black; width:100%; color: white;}
      </style>
      <body>
      <top>Your Website name
      </top><br />
      <a href="index.html">Home</a>
      <a href="desc.html">Description</a>
      <a href="other.html">Other Link</a>
      <a href="cont.html">Contact Us</a><br />
      <video controls="controls" height="150" width="150">
      <source src="child-iq.mp4"></video><br />
      <img src="face.png" height="100" width="150" />
      <footer>&copy; explorerstars.com</footer>
      </body>
      </html>
      hover link visited active  in css with HTML for website tutorial learning html and css
      Output for - hover, link, visited, active,  in css with HTML for website tutorial learning html and css
      Please comment is find any problem. 

      How to make radio button in html for website designing

      How to make radio button in html for website designing

      Let us learn how to add radio button in HTML5 coding :
      radio button in html
      radio button in html
      <html>
      <head>
      <title>My Website</title>
      </head>
      <body bgcolor="brown">
      <form>
      <fieldset>
      <legend>Choose one : </legend>
      <p><input type="radio" />Male
      <input type="radio" />Female
      <input type="radio" />Transgender</p>
      <label>Comments</label>
      <textarea></textarea></p>
      <input type="submit" value="Click Here to Submit" />
      </fieldset>
      </form>
      </body>
      </html>



      Please write in comment box.

      Friday, 16 March 2018

      comment box in html coding with example

      comment box in html coding with example

      Comment box is also an essential part for your website, learn here how to add the coding to show the box in your webpage. This is written as textarea in HTML5 :
      See the coding in HTML5 for the textarea given below and the output which will be shown on the live website in the browser :

      textarea in html or comment box
      textarea in HTML


      <html>
      <head>
      <title>My Website</title>
      </head>
      <body bgcolor="chalk">
      <form>
      <legend>Contact us : </legend>
      <p><label>Your email</label>
      <input type="email" /></p>
      <p>
      <label>Password</label>
      <input type="password" /></p>
      <p>
      <label>Comments</label>
      <textarea></textarea></p>
      <input type="submit" value="Click Here to Submit" />
      </fieldset>
      </form>
      </body>
      </html>

      Please comment for any problem in comment box.

      form making in html email and password columns in HTML

      form making in html email and password columns in HTML

      Look at the email and password columns in HTML5 :

      form making in html email and password columns in HTML

      You have to write your email in proper way otherwise your browser will show the error message shown in the picture above.
      In password column you will see your password in encrypted way which nobody can read it. This is their default behaviour when you tell the browser which type of input will be filled :
      i.e. input type="email", input type="password" etc.
      • Look at the coding given below carefully.
      • Analyze where tags are closing.  
      <html>
      <head>
      <title>My Website</title>
      </head>
      <body bgcolor="red">
      <form>
      <legend>Contact us</legend>
      <p><label>Your email</label>
      <input type="email" /></p>
      <p>
      <label>Password</label>
      <input type="password" /></p>
      <input type="submit" value="Click Here to Submit" />
      </fieldset>
      </form>
      </body>
      </html>
      Please comment if any problem.

      fieldset and legend in html

      fieldset and legend in html to make the form attractive

      fieldset and legend in html

      Now try to learn how to add fieldset and legend in HTML5
      Look at the border which was not present in previous chapter. The form is surrounded by a line is fieldset and the matter written - "Contact Us" is the legend for this form :  

      <html>
      <head>
      <title>My Website</title>
      </head>
      <body bgcolor="red">
      <form>
      <fieldset>
      <legend>Contact us</legend>
      <label>Name</label>
      <input type="text" />
      <label>Email</label>
      <input type="text" />
      <input type="submit" value="Contact Us" />
      </fieldset>
      </form>
      </body>
      </html>
      • Look carefully where fieldset tag and legend tag are closed.
      For any confusion please write in comment box.

      making form in html

      making form in html coding with output result

      making form in html coding with output result

      Look at the coding in html given below to make a form in HTML5 :
      <html>
      <head>
      <title>My Website</title>
      </head>
      <body bgcolor="green">
      <h1>Creating Form</h1>
      <form>
      <label>Name</label>
      <input type="text" />
      <label>Email</label>
      <input type="text" />
      <input type="submit" value="Submit" />
      </form>
      </body>
      </html>
      • See carefully how tags are closed.
      • Just practice and enjoy html coding. 
      Please comment if any problem in comment box. 

      revision in html coding with output example in notepad or notepad++

      Revision in html coding with output example in notepad or notepad++
      Revise, what you did in earlier chapters in HTML5.
      Now, learn how to insert symbol in your webpage.

      <html>
      <head><title>My Website</title>
      </head>
      <body>
      <h1>Top section of the page</h1>
      <h2>Main Section of the page</h2>
      <p>Paragraph - write something about your 
      website or your product.</p>
      <h3>Insert the image about your product.</h3>
      <img src="girl_clip.png">
      <h3>Footer</h3>
      This is the footer section of your webpage - &copy; www.jaangla.com&trade;
      </body>
      </html>


      You have to use (&) ampersand symbol and write copy then (;) semicolon like this - &copy;
      Please comment if find any problem in comment box.

      how to put images on web page html coding with output example in notepad or notepad++

      how to put images on web page html coding with output example in notepad or notepad++

      put images on web page: let us learn how to make hyperlink for uploading the image for your web page :
      See the html5 code written below :
      how to put images on web page html coding with output example in notepad or notepad++

      <html>
      <head><title>My Website</title>
      </head>
      <body bgcolor="violet">
      <h6>Below is the link or anchor tab</h6>
      <a href="otherpage.html">Other Page</a>
      <h6>See the image below with the help of img src tag</h6>
      <img src="praveen sharma_g.png">
      </body>
      </html>
      Remember your picture must be at same location where you mentioned it in the code :
        • img src="praveen sharma_g.png" is now present where my index.html is located.
        • You can change the location like this : img src="images/my_photo.jpg" etc. 
        • Here your image my_photo.jpg must be in images folder.
      For any confusion please write comments in comment box. 

      hyperlink in html

      Other Page Link - Anchor in HTML, let us learn about hyperlink in html -

      Now try to make a hyperlink for a webpage in html which will forward you to another page, see the code for anchor tag or link written below :
      <html>
      <head><title>My Website</title>
      </head>
      <body bgcolor="red">
      <p>This is first line of your website. or Paragraph</p>
      <p>This is the second line. or paragraph</p>
      <h5>Below is the link or anchor tag</h5>
      <a href="otherpage.html">Other Page</a>
      </body>
      </html>

      Anchor in HTML, hyperlink in html

      See the result in the browser.
      You will see the result given in picture or something like this in different browser


      Anchor in HTML, hyperlink in html not working
      For the solution of this problem, make a new file which was discussed in first chapter, name that file otherpage.html. Keep this file where your index.html present.
      See the result in your web browser.


      <html>
      <body bgcolor="green">
      This another page
      </body>
      </html>
      Anchor in HTML, hyperlink in html creation of another web page

      Write comment if any problem in comment box.

      learn how to add table row and table data for a table in html for web designing

      learn how to add table row and table data for a table in html for web designing in a simple way, coding for table formation for a web page in html programming is also given for your ready reference. 
      add table row and table data for a table in html for web designing

      Add more in previous coding :
      tr means table row and td means table data.
      • Never forget to close tags like this </tr></td>.
      • See previous chapter from beginning. 
      • Look carefully I am changing a little in coding, find that, and try to do so.

      <html>
      <head><title>My Website</title>
      </head>
      <body bgcolor="grey">
      <p>This is first line of your website. or Paragraph</p>
      </p>This is the second line. or paragraph</p>
      <h4>This is your First Table for your first webpage</h4>
      <table border="2">
      <tr>
      <td>First Row</td>
      <td>Tabel data for first row.</td>
      </tr>
      <tr> 
      <td>Second Row</td>
      <td>Table data for second row.</td>
      </tr>
      <tr> 
      <td>Third Row</td>
      <td>Table data for third row.</td>
      </tr>
      </table>
      </body>
      </html>
      See the result in your web browser.
      Please comment.

      table making in html (starting)

      Table making in html (starting)

      Look at the table tag, insert these lines in previous chapter's coding and see the result in your web browser for Table in HTML5 for your website.

      Let us learn about tables in html

      <html>
      <head><title>My Website</title>
      </head>
      <body bgcolor="yellow">
      <p>This is first line of your website. or Paragraph</p>
      </p>This is the second line. or paragraph</p>
      <h1> This is your First Table for your first webpage</h1>
      <table border="1">
      <tr>
      <td>Like this</td>
      <td>Yes, this too!</td>
      </tr>
      </table>
      </body>
      </html>
      table making in html tutorials


      Write comments in comment box.

      HTML Heading h1, h2, h3, h4, h5, h6 in html coding

      Now use heading for your web page to make it more attractive in html5 :
      Go to previous chapters coding and add a little more, written as in blue:
      The heading are h1, h2, h3, h4, h5, h6. Just try in we browser.
      <html>
      <head><title>My Website</title>
      </head>
      <body bgcolor="pink">
      <p>This is first line of your website. or Paragraph</p>
      </p>This is the second line. or paragraph</p>

      <h1>This is unordered List</h1>
      <ul>
      <li>Flowers</li>
      <li>Clothes</li>
      <li>Shoes</li>
      <li> Jug</li>
      <li> Bucket</li>
      </ul>

      <h2>This is ordered list</h2>
      <ol>
      <li>Flowers</li>
      <li>Clothes</li>
      <li>Shoes</li>
      <li> Jug</li>
      <li> Bucket</li>
      </ol>

      HTML Heading h1, h2, h3, h4, h5, h6 in html coding with example tutorial
      </body>
      </html>


      Write comments in comment box.

      bgcolor means background color in html

      bgcolor means background color in html
      In this sixth chapter we are using bgcolor meaning background color for our web page.
      Just try to change only a little in previous coding for change in background colour of your webpage in HTML: <body bgcolor="pink">


      bgcolor means background color in html
      Add caption

      <html>
      <head><title>My Website</title>
      </head>
      <body bgcolor="pink">
      <p>This is first line of your website. or Paragraph</p>
      </p>This is the second line. or paragraph</p>
      <ul>
      <li>Flowers</li>
      <li>Clothes</li>
      <li>Shoes</li>
      <li> Jug</li>
      <li> Bucket</li>
      </ul>

      <ol>
      <li>Flowers</li>
      <li>Clothes</li>
      <li>Shoes</li>
      <li> Jug</li>
      <li> Bucket</li>
      </ol>

      </body>
      </html>
      and see in your web browser.

      Please comment for any difficulty.

      ordered list in html

      Ordered List in HTML5, Let us learn what is order list in html :
      For ordered list you have to add a new tag in previous chapter's coding :
      <ol></ol>
      and see the difference on your browser:
      There are bullets in unordered list and numbering in ordered list.
      <html>
      <head><title>My Website</title>
      ordered list in html </head>
      <body>
      <p>This is first line of your website. or Paragraph</p>
      </p>This is the second line. or paragraph</p>
      <ul>
      <li>Flowers</li>
      <li>Clothes</li>
      <li>Shoes</li>
      <li> Jug</li>
      <li> Bucket</li>
      </ul>

      <ol>
      <li>Flowers</li>
      <li>Clothes</li>
      <li>Shoes</li>
      <li> Jug</li>
      <li> Bucket</li>
      </ol>

      </body>
      </html>

      Please comment if any problem in all chapter's coding.

      Unordered list and list items in html

      Unordered List in HTML5
      Let us learn about unordered list in html
      Start with previous chapter's coding :
      • Add <ul></ul> tags in <body></body> tag.
      • Remember : list item tag <li></li> will be written between <ul></ul> tag.
      • Look as the following coding, you will find the result like this:

      unordered list and list items in html tutorials
      <html>
      <head><title>My Website</title>
      </head>
      <body>
      This is first line of your website.
      This is the second line.
      <ul>
      <li>Flowers</li>
      <li>Clothes</li>
      <li>Shoes</li>
      <li> Jug</li>
      <li> Bucket</li>
      </ul>
      </body>
      Please comment for any confusion.

      table format in html (advanced)

      Table format in html (advanced)

      practicing table format in html with coding and example

      We are now revise what we learnt about HTML5. It would be a little confusing for the beginner, but we are trying not make it confusing. Here you would meet some new terms like table bgcolor, colspan, height and width of image etc. 

      table bgcolor is the same as we earlier put in <body bgcolor="">. Here we are trying to do all in table that's why we are emphasizing <table bgcolor=""> etc.
      • You are now getting familiar to colspan attribute in table. colspan="whatever number" means you are merging all columns into one column i.e. here we are using three columns in the table. We need only one column for writing text, so we merged all the three columns in one column. If we don't merge it, both the columns would go outside from the rest of the table and the symmetry of the table would be dis-balanced. You can try without colspan and see the result in your web browser.
      • Next terms is align, you know there are left, center, right, top or bottom alignment are used. Just try to use right alignment in this table. You can change in your HTML5 Coding and see the result of alignment in your web browser.
      • Next term is used here is the height and width of the image, see HTML5 Coding written below and its result too. You are free to change increase or decrease the size of width and height of the image in your coding while practicing and see the result in your web browser.



      creating table in HTML
      table in HTML


      <html>
      <head>
      <title>My Website</title>
      </head>
      <body>
      <table bgcolor="pink">
      <tr>
      <td colspan="2" align="right">My Website</td>
      <td><img src="girl_clip.png" width="50" height="20" /></td>
      </tr>
      <tr>
      <td><a href="index.html">Home </a></td>
      <td><a href="desc.html">Description</a></td>
      <td><a href="otherlink.html">Other Link</a></td>
      </tr>
      <tr>
      <td colspan="3">This is about our website.
      We sell fruits and flower.</td>
      </tr>
      <tr>
      <td><img src="app.png" width="150" height="100" /></td>
      <td><img src="lotus.png" width="150" height="100"/></td>
      <td><img src="plant.png" width="150" height="100"/></td>
      </tr>
      <tr align="center">
      <td colspan="3">Your web address is www.jaangla.com Tel.:0000000 etc. etc.</td>
      </tr>
      <table>
      </body>
      </html>
      • Again remember, from where the tags are started and where these are closed should rightly be followed. 
      • Try to study previous chapter if you are not properly understand this chapter.
      Please comment if any problem regarding HTML Programming till now.

      Adding new paragraph in html

      HOW TO INSERT A NEW PARAGRAPH in html5 :

      Now we are adding <p></p> tag before and after the
      line to make it a complete line or paragraph.

      <html>
      inserting paragraph tag in html for web development in web page<head><title>My Website</title>
      </head>
      <body>
      <p>This is first line of your website.</p>
      <p>This is the second line.</p>
      </body>
      </html>

      If you don not add <p></p> tag, your second line will also
      be shown in first line i.e.

      inserting paragraph tag in html for web development in web page<html>
      <head><title>My Website</title>
      </head>
      <body>
      This is first line of your website.
      This is the second line.
      </body>
      </html>
      Comment for any query.

      Thursday, 15 March 2018

      Title in html

      Title in html 


      html title attribute page tool tip in head section with coding and example
      how to show website's title on upper side in
      html5 with the help of notepad

      how to add title of the website on web page
      title of the website

      on the browser. It will always be placed between head tag.
      Now add more in previous coding 
      <html>
      <head>
      <title>
      My Website
      </title>
      <body>
      This is First Page of our Website
      </body>
      </html>
      Save the file. Double Click and see the result.
      Look at the top of the picture, you will see there My Website is written. This is the title of our web page / website.
      Remember : 
      • You always have to write <title> tag between <head></head> like this : 
      <head><title> xyz.. </title></head>

      If you find any confusion, please comment.

      html tutorial for beginners with examples and coding

      html tutorial for beginners with examples and coding
      Quick and easy guide for html with example and coding in notepad
      html5 and css3 tutorial - easy way of learning html5 and css3 with the help of notepad 
      Chapter - one 

      In this digital era, the field of website is growing day by day, we all daily use it, whether is search engine, social networking site, e-commerce website or a video sharing site. The basic for all is HTML, if you actually want to create a website, try to understand the programming in HTML. html5, css3 learning is written in very simple way, so that a beginner can understand the techniques of programming as well become familiar to HTML. This is chapter number one, you can see the post for next chapter, just try on your computer or laptop, everyday and see the output. You must pay attention specially on the beginning of tags and do not forget to close all those tags which you added in programming. 


      start off coding for website how to make programming is a part of form html by which a single choice can be chosen from many options in this tutorials of website designing or webpage design, what is html? how to create website, website design web design, You can use notepad of windows or notepad++ for writing the codes for html and css, how to make website using html and css, introduction to html programming in very easy and simple way from basic and starting. In notepad++ you can type your code and click on file menu and save as sub menu and change normal text file (*.txt) option to (HTML) Hyper Text Markup Language file (*.html) or before starting to type your code click on to language menu, find the first letter of your language in which you want to type your coding, click H submenu and select HTML language there, it will now work as a default language for your software and while you will save your file, the software will automatically choose Hyper Text Markup Language file (*.html).



      There are two types of website, first is static website where no JavaScript or php is used in the coding, second is dynamic where server side programming such as php or other language is used and the client side script like JavaScript or other language is also used, third is sql language which is used for server side database management, but all the three languages which we are discussed used in dynamic websites not in static websites, both static and dynamic websites or webpages uses html - hypertext markup language and css - cascading style sheet which are primary languages for making webpage or website and necessary for both static and dynamic webpages or websites both, so have to start from html later css and later other languages to learn,


        Saving File for HTML in notepad or notepad++
        Saving file for HTML
      • In next chapters we have updated the text matter for your convenience, so that step by step guidance will be provided to make the HTML Programming easy.  

      So, let us start programming today in very simple way. Best of Luck !
      Open text editor / notepad and start to type coding for HTML5.

      so have to start from html later css and later other languages to learn, Here we are trying to understand about static website or static webpage. Latest versions of html and css programming languages are html5 & css3. You have to save as the written text or code of html in notepad, you will find two option there beneath as save as type, first option will be - text document (.txt extension) file and second - all file, you have to choose second option not first one, choose all file as type above in file name column as index.html (delete that *.txt extension which is already written there) and save the file. by default you will find *.txt extension again and again, you always have to omit this *.txt extension and make new one adding .html extension while saving a new file as save as file for the first time for a new file, after that you can save the file which you have given a name and .html extension too. this is the intro or introduction to you for starting html as first language for your web page website designing. In notepad++ you can type your code and click on file menu and save as sub menu and change normal text file (*.txt) option to Hyper Text Markup Language file (*.html) or before starting to type your code click on to language menu, find the first letter of your language in which you want to type your coding, click H submenu and select HTML language there, it will now work as a default language for your software and while you will save your file, the software will automatically choose Hyper Text Markup Language file (*.html).
      • start to type there as 
      <html>
      <body>
      This is your First Line, which will be shown on web browser.
      </body>
      </html>


      • Now save the file. 
      • [Remember: During saving (Ctr + S) the file see below, there are two option in save as type : text document (*.txt) and all files] You have to select all files in your text editor or notepad. Type your file name as index.html in file name column.
      • Remember where you put your index.html file. Go there and double click on your index.html and see your first effort for your own website.
      In next chapters you will see how to change bgcolor in HTML meaning background colour of the page in HTML, creating table in HTML, Form creation in HTML. A lot of techniques, we will learn during the form creation in HTML i.e. 
      1. input type text tag in HTML
      2. input type number tag in HTML 
      3. how to add submit button in HTML 
      4. how to add reset button in HTML 
      5. how to add comment box in HTML 
      6. how to add legend in HTML 
      7. how to add textarea in HTML.
      8. Inserting images in HTML.
      9. Inserting table in HTML.
      In short, this is right way to learn HTML / HTML 5 for beginners with examples and its output.
      For next chapters see the posts or chapters.
      Please comment if you find any problem.