Windows Website - Hello World Part 3

After getting our basic site to show up, now we gotta make it show something a little fancy.

I will be very real with you. You can learn how to make buttons and put images on the page and text and... But in the end, how different is that from making a Word document? Or a PDF?

What sets a programmer apart and what sets the fancy websites apart from others is that they have logic in them. When you click the button and something magic happens. When you swipe on something it interacts and responds. When you click Submit it updates and shows more content. Logic is all of the things you can make a fancy site do that a document can't. You can print out a Word document or PDF, but can you really print out a website that responds when you touch or click it?

There are many tutorials out there for how to make great looking websites, but here for your beginning learning that's not what we are going to focus on. Learning logic is what makes you a true programmer, and concepts learned in programming logic carry over to all the other languages and platforms out there.

So if you want to get the best bang for your buck, logic is where to start, and then you can specialize what you want to learn to make things pretty. 😃

Learning logic is what makes you a true programmer

So we are going to modify the code you have in Notepad a bit! We are going to add what's called Javascript. Javascript is the part of a website that introduces the logic that we talked about. Javascript is held inside a script tag.

Add the following code new code block after line 2, the <html> line:

  1. <head>

  2. <script>

  3. function hello() { alert("Fancy!") }

  4. </script>

  5. </head>

Let's walk through this new section line by line how we did before. Remember that this section is inserted after the previous line 2, and these line numbers are just relative to this new part we are adding.

Line 1: This is a new tag we haven't encountered yet. This is the head tag. Unlike the body tag, this is a section representing stuff that doesn't appear on the page. That may not make a ton of sense now, but it's where things like colors, stylings, themes, and code logic can go. Even the title of the webpage on the browser tab can go in here! Because we are adding code logic to the page, and since logic isn't something visible to the page, it goes in the head.

Line 2: In our new head section, we can add sections for the different types of lines we just talked about. One of those sections, the script section, is where code can go! So by opening this tag here, that means we can add code to it. Anything that goes inside this tag is Javascript code.

Line 3: This is the code for our page. And honestly, just know that it's going to make a little message box popup that says "Fancy!" I could go into it, but let's not push it. The most important thing for you to get from this lesson is the section where code goes and how to get started with code, not to understand why the code works yet.

Lines 4 and 5: This just closes the script tag and then the head tag. Nothing more to this than that! I hope you are comfortable with the idea of opening and closing tags now. Remember that anything between <script> and </script> should be code, and anything between <head> and </head> is where things like code, colors, styles, etc, should go.

To make it all work we just need to do one more thing!

Your line with <body> needs to be changed <body onload="hello()">

This tells your webpage to execute our Javascript when the page loads. Pretty important otherwise the code will just sit there!

After that save your code with Ctrl+S or File->Save from the menu. Go back into your browser and refresh, and then viola!

SUCCESS!

We have now added an area for logic on our page and made more than just a document. We now have an area to add any code we want and a good template of where to start if we wanted to make a new project. We now have something we can feel PROUD of and show off, even if it's just the first steps.

I know it may not feel like much, but you did it! And the first step is the hardest one to take.

The full page code should look like this:

<!DOCTYPE html>

<html>

<head>

<script>

function hello() { alert("Fancy!") }

</script>

</head>

<body onload="hello()">

Hey you!

</body>

</html>

I know I just listed all the code, but feel free to look over the complete code for this project online and even to check if the code has received any updates or revisions here: https://github.com/nicforzen/helloworld_web

I will be making sure to add code project links for everything we go over together! 😃

The next section will talk about a broad overview of programming and what being a programmer in the world of code is really like. Stay creative.