Pratika Agnihotri HTML

Fetching Data from Database in Django

After creating models, we know, we have to run ‘makemigrations’ command in the console so that our database is prepared with all the columns in it which we defined in our models.py file inside an app. Suppose you created a registration form and you displayed it in your website. Now if someone registers himself/herself and then wishes to see his/her profile or even if admin wishes to see the data of his customer in the website (not in database) then it means we have to plan something so that the data submitted by the customer which is stored in our database could somehow be fetched and presented in the webpage.

Thats what we are going to do here. I will simply fetch the data from database without focusing on its presentation in the webpage.

Pratika Agnihotri HTML

STARTING WITH DJANGO

Django is a Python web framework. Framework is a collection of multiple Python Modules. A Module is any Python file.

For example – Suppose you created a Python program which can set a connection with the database and then saved it with the name dataPro.py then this is a Python file or a module. And such useful modules serving different purposes can be packed to produce a complete framework.

When multiple modules, each consisting of libraries, classes and logical functions and variables, which serves as a time-saver and provides clean and pragmatic way to build wholesome software products as well as allows the developer to start the things not from the scratch thereby saving the time which could have been invested in coding the basic logic which is used in almost all websites building.

There are many web frameworks, Django is just one. And Yes, Frameworks and Libraries are two different things. Below two Quora answers will better make you understand in case there is any doubt…

Quora Source

And this too…

https://qr.ae/pNvoIn

Now coming specifically to Django. Many content makers claim its an easy framework. But let me warn for all the self learners this is gonna be most difficult thing. Yes it is difficult but not impossible. Just as in the movie the Imitation Game , I am not like the below Commander 🙂

Source

IF you haven’t watched the movie yet, I will recommend you to leave everything and jump to it.Really!

Django is a web framework used to create dynamic awesome web pages.

I will go through step by step.

  • Download Python latest version. I am using 3.6
  • Download VSCode. I like it the most. You may chose any other code editor too.
  • Set Python Path(if you dont know take help from You Tube Videos).
  • Create a folder say- myProjects
  • Inside the folder in the explorer in address bar select whole written stuff and type cmd so that you can easily navigate to the console window inside myprojects,
  • first create a virtual environment typing – python -m venv venv. Here second ‘venv’ is the name of Virtual Environment.
  • To install Django type – pip install Django
  • Now to create a Project type django-admin startproject mysite

In django every functionality of a website can be called as an app. Yes, suppose you have a website and in that you want some menu items like – About, Contact, Blog, Projects to be listed in your menu. Then these all can be handled very easily and cleanly considering them as apps.

By default Django uses ‘sqlite’ as database. We can change it to some other which I will share in some time.

After following above steps you will see a folder named mysite inside myprojects folder. Now don’t think that you did something wrong because inside mysite folder there is another folder named mysite along with a manage.py file.

This manage.py is of great use. It is used for running server, creating a superuser who handles admin panel, creating apps accessing sqlite (if you wish) and other core tasks.

Now cd to mysite folder, which is inside myprojects folder, from the console. And there type- python manage.py runserver and in the console window itself you will get a url similar to 127.0.0.1:8000. ‘127.0.0.1’ is localhost and ‘8000’ is port number.

Source: Lifewire

Type the same address in google address bar and SMILE you are ready to head on an amazing journey. You shall see a 0 level static webpage. You have to build something fruitful, make it dynamic, more powerful and attractive so that it is helpful and worth showing to someone. Follow my next post to build a simple registration, login, logout page in django.

Thank You !

Pratika Agnihotri HTML

Understanding Static in JAVA

Normally, a class member (instance variables or methods) is accessed only through an object of its class. However, it is possible to create a member that can be used by itself without reference to a specific instance.

To create such a member, we precede its declaration with static keyword.

Any static member can be accessed before any object of its class are created or even exist.In simple language you can understand that static members don’t care of instantiation (object creation) of its class. They are always available.

Both variables and methods can be static.

The most common example is main() method. It is declared as static because it is called before any object exists. static allows main() to be called without having to instantiate a particular object of class. This is necessary since main() is called by JVM before any objects are made.

When objects of such a class, in which instance variables are declared as static, are created, no copy of static variable is made. That static variable exists singly- the original. Let me show this with couple of codes (first code is the normal program without static and second code is with static) –

Program-1
this is the normal program without static keyword
OUTPUT- Tony Stark
Tony Stark
Tony Stark
Dwayne Johnson

Above code and its output should be quite clear. I have created two objects (h1, h2) of class ‘Heroes’ and first printed the ‘name’ of both these objects. Look they give same output because I have initially initialized the ”name” with ‘Tony Stark’. Don’t get confused that only one ‘name’ is shared by both objects. This is not the case, both have separate memories for their particular ‘name’. Then I have changed the ‘name’ attribute of h1 and then again printed the ‘name’ of both the objects. In this case the name attribute of h2 remained same (‘Tony Stark’) while that of h1 changed to ‘Dwayne Johnson’. This clearly shows that both the objects do have separate memory allocation for ‘name’. This means two copies of ‘name’ are created – one for h1 and other for h2. Right !

Now look carefully the following code where I have made just a small change- ‘String name’ to ‘static String name’ in second line.

Program-2
OUTPUT – Tony Stark
Tony Stark
Dwayne Johnson
Dwayne Johnson

In above code, both objects (h1 and h2) share same memory so if changes are made in h1, it is clearly reflected in h2. I hope you got it… Thus all instances of the class share the same static variable.

Methods declared as static have following restrictions:

  • They can only directly call other static methods.
  • They can only directly access static data.
  • They cannot refer to this or super.

Let me give you an example –

Program-3

In above example, one instance variable – ‘percent’ is static and print() method is also static so they can be directly accessed in any static method. Since main() is static so look how it directly accesses other static members (percent and print()) of class.

We can use static block also. It is actually used to initialize static members of class. And important thing to note is it is executed before main(), so yes if you are thinking to run your program without main() it will run if you have static block. That’s why this concept is invalid in current versions of JDK.

It is not at all useful in current versions of Java. So let’s focus only on important things. 🙂

How to access static members outside the class ?

Not much tiring, especially when you are dealing with static members. Static members are accessed by the use of the dot operator on the name of class. In Program-2 I have accessed static members through objects but let me tell you this is not at all needed, this is wasteful. You can access them directly. I showed that to you just to make the difference clear between static variables and non-static variables.

Now look at this code, I even don’t need to create objects to access them, however we can create when needed.

Program-3
OUTPUT – Tony Stark
Dwayne Johnson

That’s it for static…

Have a good time !

Pratika Agnihotri event handling, HTML, PHP

Event Handling

Let’s create a simple web page where a user will give his first and last name and we’ll display his full name (by concatenating first and last name) in some other web page.

So we’ll make two files – one HTML file and one PHP file. HTML file will be for designing the layout where user will enter his first and last name and PHP file will be for generating logic to display his full name at once.

The HTML file I have designed is something like below – 

<html>
  <head>
    <title>FIRST AND LAST</title>
  </head>
  <body text="darkgreen">
    <br><br><br>

    <form name="myform" action="firstand lastname.php" method="post">
    <fieldset>
      <legend>USER INFO</legend>
      <table>
        <tr>   <td>First Name</td><td><input type="text" name="first"></td>     </tr>
        <tr>   <td>Last Name</td><td><input type="text" name="last"></td>      </tr>
        <tr>   <td><input type="submit" name="submit" value="SUBMIT"></td>    </tr>
      </table>
    </fieldset>
    </form>
  </body>
</html>

Please take note of this that whenever we place any submit button in form, it is compulsory to use <form> tag. So in above code inside <form> tag I have used action=” “ . In action I have given the name of my php file which contains logic to display full name. You may give name of your PHP file inside action. So the PHP code I wrote in my PHP file is-

In PHP code, I have first extracted the keys into variables. (Actually the keys are the name which we give inside <input> tag in HTML file. You may check this using var_dump($_POST)) .

So converting keys into variables allows us to handle them as normal variables in PHP. Using isset($submit) tells us whether SUBMIT button is pressed or not. (submit is the name of my SUBMIT button in my HTML code, if you have given some other name use that name) . If SUBMIT is pressed then the first and last name will be concatenated with a space in between. And we will simply echo this. ($first and $last are my name which I have given to first and last name respectively in my html code, yours might be different so use that)

Save both your PHP and HTML file in Documents Tool Folder (www) and run your HTML file (not PHP).

That’s it.

Have ERROR FREE coding!

Pratika Agnihotri HTML, PHP

How to read values from HTML file in PHP file

Remember we created a form in HTML, we entered our details and those details were clearly visible in URL. But if we use method="post"inside <form> tag in our HTML file, our details will not be visible. And recall how we used action attribute to send/post the details to some other page, and this page could be any HTML or PHP file. Also remember that whenever you want the user to submit his/her details by pressing a submit button, it is necessary to use form tag.

So here we’ll read those details in PHP file. When we coded that form in HTML file, we used <input> tag and inside it we used attributes/property like type and name. Type was used to specify the type of value the applicant should enter – text, email, password, file, image, color, date, etc. And the name given to name property is used as a key to access the details entered by the applicant in respective fields. So with the help of this KEY only we are going to read the values. This is known as EVENT HANDLING.

So first we’ll make a new PHP file. In that file we have, actually, two ways to read values.

First way

Open PHP file, and type following code and save the file- 

<?php
    var_dump($_POST);
    
?>

$_POST and $_GET are known as Super Global Variables.

But, but, but…first, open your form which we designed in HTML and make some changes there in coding. Look there you must have opened <form> tag and inside that you must have written name= ” ” , method=” ” and action=” “. Right.

  • In name you can give any value that doesn’t matters, in method you should write either method=”post” or “get” .I am considering that you are aware of meaning of both of these. In action, we write the name of that file where we want to post the information submitted by applicant.
  • So, the above PHP code which I have written, you type it save it with extension .php.
  • The name which you are giving to this PHP file is important. Why important? Because we want the data to be displayed in this PHP file only, so quickly go back to your HTML code (code where we designed the complete form), inside the <form> tag, in action= ” “ , between the double quotes type the name of your PHP file, which you just saved. Done!
  • And before running your this HTML file, note that if you have written method=”post” inside <form> tag, then above PHP code which I have written is valid but if you have written method=”get”, then you need to make just a small change in above PHP code, write var_dump($_GET). That’s it !
  • You can now safely run your HTML file (not PHP file because you created PHP file just to get the information filled by user in the form and that form is designed in HTML file).
  • Fill the details and click on submit button.
  • You will get an output displaying all the information. You need to look carefully and understand the format of output, it will help in displaying individual values in PHP. Got it!

Now you must have got that the output we are getting is in the form of Associative Arrays. Why Associative Arrays? Because, look carefully, the names which we assigned in our HTML file inside the <input> tag are now acting like keys…Yes ! Now it will be quite easy to access the values associated with those keys.

So again quickly jump to your PHP code and add some lines- 

<?php
    var_dump($_POST);

    echo $_POST['mob']."<br>";
    echo $_POST['fname']."<br>";
    echo $_POST['mname']."<br>";
    
?>

I have printed just three values, you may print all your values through the value of name which you gave in your HTML file. But printing individual values in this way is tiring.

So, let’s understand the second way to print values.

Second WAY

This is easy. Believe me. As we saw that the output we get after submitting our form is stored in associative array (key-value pair). We have an excellent in-built function extract(). It does all the job for us. Look at following code first – 

<?php
    extract($_POST);

    echo $mob."<br>";
    echo $fname."<br>";
    echo $mname;

?>

We know, that $_POST or $_GET is an associative array name which has key-value pairs. So what extract() function does is- it converts keys into variables. And when keys are converted into variables we can simply print them through echo. This is simpler than previous method.

While displaying values you may face problem in printing the values of radio buttons and checkboxes. So let’s solve that. Open your ‘form’ code which, of course, you must have saved in some HTML file. There in gender you must have used two input tags (one for male other for female) with type=”radio”. Inside both input tags use two more properties- name property and value property. Carefully, give same name in name property in both input tags. While in value property, write value=”Male” in male input tag and value=”female” in female input tag. Now, run the output fill the form click on submit and you will surely get the right gender. And if you are not getting, then please share your problem here in comments so that I may help.

In case of checkboxes, the name which we give in the name property inside <input> tag should be an array and you should write some value in value property also. Let me explain with one example below-

<input type= "checkbox" name="chk[]" value="Reading blogs">Reading Blogs
<input type= "checkbox" name="chk[]" value="Net Surfing">Net surfing
<input type= "checkbox" name="chk[]" value="Programming">Programming
<input type= "checkbox" name="chk[]" value="Travelling">Travelling

I expect you must have got some idea how to do it. I haven’t taken any row or column, I have just given an idea of “hobbies” how you should write inside input tag. You must write this inside some row. I randomly picked some line.

I am telling to run HTML file and not PHP file and I have, above, given a valid reason also why to do so. But what if you run your PHP file without running your HTML file, of course errors will come. But if you make sure that PHP file should run only if user presses SUBMIT button in his/her form, then no error will be displayed. We’ll just do a little coding in our PHP file for this.

We have learnt that we first convert all the keys into variables through extract(). Right. To check if an applicant has pressed the SUBMIT button, we use isset($var_name).

So when an applicant presses SUBMIT in the form, the name in name property inside <input> tag is SET or ON. Coming back to our PHP code, after extracting values if the user would have pressed SUBMIT, then the name which i have taken “subBtn” would be ON or SET. Now, if I pass the name of name inside if (isset($subBtn)) then the condition will be true. Why True? Because $subBtn has now become a variable after being extracted through extract(). And when I am saying that an applicant has pressed SUBMIT button that means subBtn is ON or SET or TRUE. And so the block inside if(isset($subBtn)) will surely run. You can print all your values inside if block. And if an applicant would not have pressed SUBMIT then subBtn will be UNSET or OFF or FALSE, so the block inside if you will not run and so you will not get any error.

I have tried to explain this in most plain words, but if there is some problem please ask…That’s your HUMAN RIGHT 🙂

Doing just this much is not at all enough. We’ll do 2 more things for practice in event handling-

1- We’ll go to our calculator, and print the result there itself in result box. Click here.

2- we’ll create a login page and check if user is valid or not. Click here.

THAT’S ALL ! Please follow this blog so that you may get updates of the latest posts.

Have ERROR FREE coding.

Pratika Agnihotri HTML

Internal Linking in HTML file…

Getting goosebumps? or Excited ? 🙂

Have patience because today we’ll design the same page. And what is shown above is not the complete design, there is a lot to scroll down. But believe me, this is going to be really fantastic and you will enjoy designing this page. Imagine, how will you feel after you have designed your page fully.

What is needed is your complete attention and focus. I will upload whole code here (it is a little big because I have embedded whole speech so as to show internal linking). But but but… watching that code will not make you learn new things, rather you should code yourself and if you are facing any problem then you can refer to my code just for hint. So honesty need to be applied here… 🙂

Internal Linking is very much useful in web pages containing large documents where there are some links at starting of the page and on clicking those links we reach to our desired content in the same page. Usually, the links are at beginning of page but they can be anywhere. It could be on bottom of page to reach top of the page.

For internal linking <a></a> anchor tag is used. If I have designed a web page with three big stories in it. Then what I’ll do is I will add three links at the starting of my page which will straightly direct the reader to the required story. And this same thing I have implemented in my self-designed web page.

In above screenshot, I have added five links in my page if you’ll click first one you’ll reach first story in one go without scrolling and this applies to all the remaining four links.

I am now uploading my code so that you can see how anchor tags are used-

<html>
  <head>
    <title>About Us</title>
  </head>
  <body text="darkcyan" bgcolor="azure" align="center">

      <br><br>
    <hr color="darkcyan" size="15" width="600px">
    <a name="top">  <h1 size="6">Speech at Stanford</h1>  </a>
    <hr color="darkcyan" size="15" width="600px">

    <br><br>
    <img src="stevejobs.jpg" alt="Commencement Address" border="10">

    <br><br>
    <a href="#first">Click here to reach First story</a>            <br><br>
    <a href="#second">Click here to read Second story</a>           <br><br>
    <a href="#third">Click here to read Third story</a>             <br><br>
    <a href="#video">Click here to watch video</a>                    <br><br>
    <a href="#end">Click here to get to the END of the Speech</a>   <br><br>


    <pre>
    <font size="5">
    <p>I am honored to be with you today at your commencement from one of the finest
      universities in the world. I never graduated from college. Truth be told, this
      is the closest I’ve ever gotten to a college graduation. Today I want to tell
      you three stories from my life. That’s it. No big deal. Just three stories.

      <b><u><a name="first">The first story is about connecting the dots.</a></u></b>

      I dropped out of Reed College after the first 6 months, but then stayed around
      as a drop-in for another 18 months or so before I really quit. So why did I drop out?

      It started before I was born. My biological mother was a young, unwed college
      graduate student, and she decided to put me up for adoption. She felt very
      strongly that I should be adopted by college graduates, so everything was all
      set for me to be adopted at birth by a lawyer and his wife. Except that when
      I popped out they decided at the last minute that they really wanted a girl.
      So my parents, who were on a waiting list, got a call in the middle of the
      night asking: “We have an unexpected baby boy; do you want him?” They said:
      “Of course.” My biological mother later found out that my mother had never
      graduated from college and that my father had never graduated from high school.
      She refused to sign the final adoption papers. She only relented a few months
      later when my parents promised that I would someday go to college.

      And 17 years later I did go to college. But I naively chose a college that was almost
      as expensive as Stanford, and all of my working-class parents’ savings were being spent
      on my college tuition. After six months, I couldn’t see the value in it. I had no idea
      what I wanted to do with my life and no idea how college was going to help me figure
      it out. And here I was spending all of the money my parents had saved their entire life.
      So I decided to drop out and trust that it would all work out OK. It was pretty scary
      at the time, but looking back it was one of the best decisions I ever made. The minute I
      dropped out I could stop taking the required classes that didn’t interest me, and begin
      dropping in on the ones that looked interesting.

      It wasn’t all romantic. I didn’t have a dorm room, so I slept on the floor in friends’
      rooms, I returned Coke bottles for the 5¢ deposits to buy food with, and I would walk the
      7 miles across town every Sunday night to get one good meal a week at the Hare Krishna
      temple. I loved it. And much of what I stumbled into by following my curiosity and intuition
      turned out to be priceless later on. Let me give you one example:

      Reed College at that time offered perhaps the best calligraphy instruction in the country.
      Throughout the campus every poster, every label on every drawer, was beautifully hand
      calligraphed. Because I had dropped out and didn’t have to take the normal classes,
      I decided to take a calligraphy class to learn how to do this. I learned about serif
      and sans serif typefaces, about varying the amount of space between different letter
      combinations, about what makes great typography great. It was beautiful, historical,
      artistically subtle in a way that science can’t capture, and I found it fascinating.

      None of this had even a hope of any practical application in my life. But 10 years later,
      when we were designing the first Macintosh computer, it all came back to me. And we
      designed it all into the Mac. It was the first computer with beautiful typography.
      If I had never dropped in on that single course in college, the Mac would have never
      had multiple typefaces or proportionally spaced fonts. And since Windows just copied
      the Mac, it’s likely that no personal computer would have them. If I had never
      dropped out, I would have never dropped in on this calligraphy class, and personal
      computers might not have the wonderful typography that they do. Of course it was
      impossible to connect the dots looking forward when I was in college. But it was
      very, very clear looking backward 10 years later.

      Again, you can’t connect the dots looking forward; you can only connect them looking
      backward. So you have to trust that the dots will somehow connect in your future.
      You have to trust in something — your gut, destiny, life, karma, whatever. This
      approach has never let me down, and it has made all the difference in my life.

      <u><b><a name="second">My second story is about love and loss.</a></b></u>

      I was lucky — I found what I loved to do early in life. Woz and I started Apple in
      my parents’ garage when I was 20. We worked hard, and in 10 years Apple had grown
      from just the two of us in a garage into a $2 billion company with over 4,000
      employees. We had just released our finest creation — the Macintosh — a year earlier,
      and I had just turned 30. And then I got fired. How can you get fired from a company
      you started? Well, as Apple grew we hired someone who I thought was very talented
      to run the company with me, and for the first year or so things went well. But
      then our visions of the future began to diverge and eventually we had a falling out.
      When we did, our Board of Directors sided with him. So at 30 I was out.
      And very publicly out. What had been the focus of my entire adult life was gone, and
      it was devastating.

      I really didn’t know what to do for a few months. I felt that I had let the previous
      generation of entrepreneurs down — that I had dropped the baton as it was being passed
      to me. I met with David Packard and Bob Noyce and tried to apologize for screwing up
      so badly. I was a very public failure, and I even thought about running away from the
      valley. But something slowly began to dawn on me — I still loved what I did. The turn
      of events at Apple had not changed that one bit. I had been rejected, but I was still
      in love. And so I decided to start over.

      <a name="video">
         <video controls="true" autoplay poster="stevejobs.jpg">
          <source src="SPEECHjobs.webm" type="video/mp4"> 
         </video></a>

      I didn’t see it then, but it turned out that getting fired from Apple was the best thing
      that could have ever happened to me. The heaviness of being successful was replaced by
      the lightness of being a beginner again, less sure about everything. It freed me to
      enter one of the most creative periods of my life.

      During the next five years, I started a company named NeXT, another company named
      Pixar, and fell in love with an amazing woman who would become my wife. Pixar went
      on to create the world’s first computer animated feature film, Toy Story, and is
      now the most successful animation studio in the world. In a remarkable turn of events,
      Apple bought NeXT, I returned to Apple, and the technology we developed at NeXT is
      at the heart of Apple’s current renaissance. And Laurene and I have a wonderful family
      together.

      I’m pretty sure none of this would have happened if I hadn’t been fired from Apple.
      It was awful tasting medicine, but I guess the patient needed it. Sometimes life hits
      you in the head with a brick. Don’t lose faith. I’m convinced that the only thing that
      kept me going was that I loved what I did. You’ve got to find what you love. And that
      is as true for your work as it is for your lovers. Your work is going to fill a large
      part of your life, and the only way to be truly satisfied is to do what you believe is
      great work. And the only way to do great work is to love what you do. If you haven’t
      found it yet, keep looking. Don’t settle. As with all matters of the heart, you’ll know
      when you find it. And, like any great relationship, it just gets better and better as
      the years roll on. So keep looking until you find it. Don’t settle.

      <b><u><a name="third">My third story is about death.</a></u></b>

      When I was 17, I read a quote that went something like: “If you live each day as if it
      was your last, someday you’ll most certainly be right.” It made an impression on me,
      and since then, for the past 33 years, I have looked in the mirror every morning and
      asked myself: “If today were the last day of my life, would I want to do what I am
      about to do today?” And whenever the answer has been “No” for too many days in a row,
      I know I need to change something.

      Remembering that I’ll be dead soon is the most important tool I’ve ever encountered
      to help me make the big choices in life. Because almost everything — all external
      expectations, all pride, all fear of embarrassment or failure — these things just fall
      away in the face of death, leaving only what is truly important. Remembering that you
      are going to die is the best way I know to avoid the trap of thinking you have something
      to lose. You are already naked. There is no reason not to follow your heart.

      About a year ago I was diagnosed with cancer. I had a scan at 7:30 in the morning,
      and it clearly showed a tumor on my pancreas. I didn’t even know what a pancreas was.
      The doctors told me this was almost certainly a type of cancer that is incurable, and
      that I should expect to live no longer than three to six months. My doctor advised me
      to go home and get my affairs in order, which is doctor’s code for prepare to die. It
      means to try to tell your kids everything you thought you’d have the next 10 years to
      tell them in just a few months. It means to make sure everything is buttoned up so
      that it will be as easy as possible for your family. It means to say your goodbyes.

      I lived with that diagnosis all day. Later that evening I had a biopsy, where they
      stuck an endoscope down my throat, through my stomach and into my intestines, put a
      needle into my pancreas and got a few cells from the tumor. I was sedated, but my wife,
      who was there, told me that when they viewed the cells under a microscope the doctors
      started crying because it turned out to be a very rare form of pancreatic cancer that is
      curable with surgery. I had the surgery and I’m fine now.

      This was the closest I’ve been to facing death, and I hope it’s the closest I get for
      a few more decades. Having lived through it, I can now say this to you with a bit
      more certainty than when death was a useful but purely intellectual concept:

      No one wants to die. Even people who want to go to heaven don’t want to die to get
      there. And yet death is the destination we all share. No one has ever escaped it.
      And that is as it should be, because Death is very likely the single best invention
      of Life. It is Life’s change agent. It clears out the old to make way for the new.
      Right now the new is you, but someday not too long from now, you will gradually
      become the old and be cleared away. Sorry to be so dramatic, but it is quite true.

      Your time is limited, so don’t waste it living someone else’s life. Don’t be trapped
      by dogma — which is living with the results of other people’s thinking. Don’t let the
      noise of others’ opinions drown out your own inner voice. And most important, have the
      courage to follow your heart and intuition. They somehow already know what you truly
      want to become. Everything else is secondary.

      When I was young, there was an amazing publication called The Whole Earth Catalog,
      which was one of the bibles of my generation. It was created by a fellow named
      Stewart Brand not far from here in Menlo Park, and he brought it to life with his
      poetic touch. This was in the late 1960s, before personal computers and desktop
      publishing, so it was all made with typewriters, scissors and Polaroid cameras.
      It was sort of like Google in paperback form, 35 years before Google came along:
      It was idealistic, and overflowing with neat tools and great notions.

      Stewart and his team put out several issues of The Whole Earth Catalog, and then
      when it had run its course, they put out a final issue. It was the mid-1970s,
      and I was your age. On the back cover of their final issue was a photograph of an
      early morning country road, the kind you might find yourself hitchhiking on if
      you were so adventurous. Beneath it were the words: “Stay Hungry. Stay Foolish.”
      It was their farewell message as they signed off. Stay Hungry. Stay Foolish. And I
      have always wished that for myself. And now, as you graduate to begin anew, I wish
      that for you.

      <a name="end"> Stay Hungry. Stay Foolish.</a>

      Thank you all very much.

      <a href="#top"><img src="arrow.png" width="45px" height = "45px"></a>
    </pre>

    </p>
    </font>
  </body>
</html>

This code is lengthy just because I have included his whole speech. Believe me it’s super easy.

In above code, look in lines- 16,17,18,19,20. I have used <a></a>. And inside anchor tag, I have given some name to href and that name begins with #. And between anchor opening <a> and closing </a> tags, I have placed the string which I want user to read. In line 16, I have typed – ‘Click here to reach First story’, this means i want the reader to go to the first story in case he clicks in that line. The location where I want to send the reader is line 30. So concentrate in line 30, there too I have used <a></a> but this time the the name of href is not preceded by #. So this is the basic difference between the use of anchor tags- in the link where the reader actually clicks and the location where the reader should reach upon clicking that link. Note the difference carefully.

Now let’s look at line 17. Here I have placed the string “Click here to read second story”, that means I want the reader to reach to the second story, which is at line 87, after clicking this link. So, in line 87, I have used anchor tag and href property, but note that the name of href is not starting with #, whereas the link which we want the user to press to reach second story(in line 17) contains #.

So with the help of above examples, you must be clear how to perform internal linking. And yes you can give any name to href, but the name should be same in both places (in link and at location where the reader should reach upon clicking the link). Instead of text/string which I have used in line 16, 17, 18,19, 20, we can also use any image to allow user to click on that image to reach the desired location. Nothing extra needs to be done. You just need to put your <img> tag (to insert image) between <a> and </a>. Look at line 208 for hint. I have inserted an image so as to reach to top. So, I have given #top name to href inside anchor opening tag and at top of the page look at heading line 9, there I have used the same name top. This clearly means that if reader clicks that image on the bottom of the page, he will quickly reach to the top, no matter what is the length of the page.I hope this is quite clear now. 🙂

I know, you guys must be wondering what I have done to line 19? Where it is linking? Okay so look at line 109. Don’t get confused, it is simple. I have just embedded a video there with the help of <video> tag and have smartly placed this video tag inside anchor tag so that when user clicks on line 19 at the top,(which is a string- Click here to watch video), he is likely to reach the place where I have embedded an inspirational video. Yes, it’s truly inspirational.

You may proudly watch that video after having completed your this project.

I have used one more tag <pre></pre> and I have never used this before. This actually preserves the text. If you want to copy-paste some matter from a site to your web page and you want that it should look exactly as it was looking in that site. Then you can safely use <pre> tag. Do it yourself without and with the use of <pre> tag, you will surely get it. Try it yourself, you will be better understood.

That’s all. Hope you like this. And I think solving errors and issues and doubts make the topics more clear. So please, if you have any issue, share it here in comments and you will get back the reply. Suggestions are also welcomed… 🙂

Have ERROR FREE coding !

Pratika Agnihotri HTML

Media files in HTML


<html>
  <head>
    <title>AUDIO and VIDEO</title>
  </head>
  <body align="center">

    <br><br>
    <embed src="alarm.png" width="600px" height="300">

    <br><br>
    <audio controls="True" >
      <source src="song.mp3" type="audio/mp3">
    </audio>

    <br><br>
    <video controls="true" autoplay poster="posterimage.jpg">
      <source src="RT.mp4" type="video/mp4">
    </video>

  </body>
</html>

To insert audio in our web page, we use <audio></audio> tag. Inside this tag, put controls=”true” (please see above code for hint) in order to play audio file. Remember that the audio file which you are going to insert should be placed inside the same folder in which your current html file is placed. Usually, audio files have ‘.mp3’ extension but it can be .wav or .ogg so you should be careful for extension. Inside the <source> tag, place name of audio file with extension and type=”audio/mp3″ will remain same for all extension.

The same rules apply for <video></video> too. Look above code for help.(Pay attention to extension of video file).

<embed> tag allows to insert either audio or video or image file. (Look above code to get a hint.)

That’s it for media files.

Have ERROR FREE coding !

Please share your doubts here, if any.

Pratika Agnihotri HTML

Forms in HTML continued…

In the previous post we designed a good-looking form. Yes we did that (you should proudly smile for that). And now we’ll move a step further.

But before making any changes in the coding of our previous form, let me introduce you with my next post which will be a fantastic layout of a Home Page . So don’t miss it, it will be a whole FUN, I guarantee.

We can limit the user/applicant to enter only valid details in a form. For this we need to add some attributes inside <input> just like we have learnt to add type and name attribute. In the same manner we’ll add the following attributes-

required=”true” . In whichever field (by field i mean whether name or qualification or address or any field of your form) you use this property, that field will become mandatory to be filled in order to submit the form.

<tr><th>Name</th><th><input type="text" name="name" required="true"></th></tr>

I have implemented in only one field, you may apply to all (I am making changes in same form we designed in previous post).

placeholder=”Enter your name” . You may use this as-

<tr><th>E-mail</th> <th><input type="email" name="mail" required="true" placeholder="Enter your email"></th></tr>

I have used this placeholder in my email field, you may use in any field and can give any name in placeholder.

maxlength=” “ with this you may restrict the applicant to limit the text upto a certain length. This text could be his name or introduction or anything text-based.

Just like maxlength, max and min are used to limit numbers. These are also attributes inside <input>, so you can put nthem there and run the code. You may use this max and min even in date. Remember the pattern yyyy-mm-dd

<tr><th>DOB</th> <th><input type="date" name="dob" required="true" max=2020-10-19 min="2008-04-19"></th></tr>

QUERY STRING

Query String is the means to send information from one page to other through Uniform Resource Locator. In previous post we have seen how the information given by an applicant is shown in the url. Even the password is clearly visible. It means we cannot give sensitive information through this. But there is a way out. With the use of method = “post ” attribute inside <form>, we can hide the information. Please do it yourself and check the url after submitting the form.

Till now the information was loaded in the same page in which the form was displayed but if we want to send that information to some other page( this could be a html or php or any file which could be opened on browser), we can do so. This is done using action attribute inside <form> tag. We can give some name of other html file in the action and run the code. And be sure that the file whose name you are going to put in action is in the same folder. This time as soon as you will submit the form , you will be directed to that page whose name you have given in action. Let me quickly show you that line of code-

<form method="post" action="syntax.html">

By default method is get.

That’s it for this post. I have tried to keep this short and simple. But if you have any doubt share your problems here in comments. And follow this blog so that you may know about new posts.

Have ERROR FREE coding !

Pratika Agnihotri HTML

Designing Forms in HTML

Forms provide a formal way to get information from client/user.

With HTML, we can create forms too. The basic idea is to create a table and add various fields using the <input/> tag. Note that input tag is a singular tag.

Let me show you a basic structure first-

Above code looks complex, but believe me its super easy. I have first done some formatting inside the <body> just to make the page look good. You can ignore doing this.

Then, I have created a table using <table> tag. I have done some formatting here also, just to make the table look good. And I believe you are aware of all the tags and their properties used till here (till table tag).

Now, inside table tag I need to create several rows with two columns each. One column for field name other for user input.

Since I need several rows, I will use <tr> for each row and in order to store some data in it we will use <th> . Remember it is a table heading tag which makes the content inside a cell as bold and aligned at center. <input> tag is used to take input from the user.

Inside <input>, we have to specify what type of input we want from user- text( used to take input in the form of text from the user so that’s why in above code I have used it while taking the name, father’s name, mother’s name from the user) or number (used to take number from user) or email (takes email from user) or password (a secret code from user as password) or date (takes date from user) or radio button (used to allow user to choose any one option among many) or checkbox (used to allow user to choose many options or even user can select all options).

Please note that, in case of radio buttons if you select all the all the radio buttons, then all will be selected. And this is something we do not want. We want only one radio button to be selected. For this, we add one property ‘name‘ in all the radio buttons and the name for the name should be same for all. You could write something like this…

<tr><th>Gender</th> <th><input type="radio" name="gen1">Male
                              <input type="radio" name="gen1">Female</th></tr>

You can give name any name of your wish. And if you want to know the use of this name, then after completing your coding part fully run your code in browser ( run your code after reading the whole post), fill all the details and then click on SUBMIT button (adding SUBMIT button and its proper working is shown at last). After you SUBMIT, look at your web page’s URL before and after filling the form. I hope you got the thing.

To give a address field, we use <textarea></textarea> tag . It has some properties like rows, columns. You can give values as per our needs. You can very easily add this field in your form using following code-

<tr><th>Address</th> <th><textarea rows="7" cols="30"></textarea></th> </tr>

To add a qualification field in our form, we can give a drop down list to user to select any one option from that list. This dropdown list is useful than giving radio buttons because it will take much lesser space than radio buttons. So, to allow user to select any one item from the list we use <select></select> tag. After <select> , we need to give options to be displayed in the drop down list. These options are placed inside <option></option> We can add this ‘qualification’ field using following code-

To give a color field in our form, we can use input type as color. To allow user to upload his/her image we will have to use input type as file. The code for both these field will be-

<tr><th>Color</th> <th><input type="color"></th> </tr>
<tr><th>Image</th> <th><input type="file"></th> </tr>

Almost everything is added in our form, feeling Happy… Wait ! Wait ! . We have forgotten to add ‘submit’ , ‘reset’ button. We can even give an image which will act like submit button. Seeeee… the code below-

After adding your submit button, if you run your code in browser, fill details and click SUBMIT, you’ll experience no changes, nothing will take place. To make the SUBMIT work add <form> just below <body> and close </form> just before </body>.

Your final code would be like this clean code (it is really a good habit to write a clean and readable code) –

<html>
  <head>
    <title>Forms in HTML</title>
  </head>
  <body text="black" bgcolor="lightblue">
    <form >

    <table bordercolor="black" bgcolor="lightgray" cellspacing="0" cellpadding= "8px"
            border="10" align="center" width="500px" >

      <tr><th>Name</th><th><input type="text" name="name"></th></tr>
      <tr><th>Father's Name</th> <th><input type="text" name="fname"></th></tr>
      <tr><th>Mother's Name</th> <th><input type="text" name="mname"></th></tr>
      <tr><th>Mobile no.</th> <th><input type="number" name="mob"></th></tr>
      <tr><th>Password</th> <th><input type="password" name="pwd"></th></tr>
      <tr><th>E-mail</th> <th><input type="email" name="mail"></th></tr>
      <tr><th>Gender</th> <th><input type="radio" name="gen1">Male
                              <input type="radio" name="gen1">Female</th></tr>
      <tr><th>DOB</th> <th><input type="date" name="dob"></th></tr>
      <tr><th>Address</th><th><textarea rows="5" cols="30" name="add"></textarea></th></tr>

      <tr><th>Qualification</th><th><select name="qul">
                                    <option>**Select</option>
                                    <option>Phd</option>
                                    <option>Mphil</option>
                                    <option>MBA</option>
                                    <option>GateRanker</option>
                                    <option>Mtech</option>
                                  </select></th></tr>

    <tr><th>Color</th><th><input type="color" name="color"> </th></tr>
    <tr><th>Image</th><th><input type="file" name="img"> </th></tr>

    <tr><th colspan="2"><input type="submit">
                        <input type="reset">
                        <input type="image" src="wallpaper.jpg" width="50px" height="40px">
        </th></tr>

    </table>
  </form>
  </body>
</html>

Now, our form is complete… You can save the code and run it… You will get a wonderful output. Look what I am getting in my browser…

We will see some more features in our next continued post

Have a ERROR FREE coding !