Windows Website - Hello World Part 1

I do have to admit that I’m going to assume a little bit of computer literacy on your part, but perhaps not a ton. We’re going to be making files and navigating around the operating system a little bit. These general computer skills are definitely required to learn to program and to be effective on a computer, but if you’re not the best at this don’t worry too much for now. As with everything I’ve been teaching you, it’s not about trying to rush onward but instead just to get experience and slow down until it all becomes natural. The basics are much more important to master than the flashy stuff you see others do, Karate Kid!

The first thing we’re going to do is open Notepad. This should be on every version of Windows and is just a basic text editor with very limited features. For what we are doing now it is more than enough!


Open Notepad through the Start Menu. You can probably even start typing it after you open the menu and see it appear as suggested.

Once open you will be greeted with a blank white window you can type in! Please forgive me if this seems rudimentary as everyone starts at a different skill level and may need a different level of hand holding. Hand holding makes coding much more manageable sometimes!


Here is the code we are going to start with! Don’t worry if you don’t understand it all now as we will be going over it all. Please copy and paste this into your Notepad program or feel free to type it yourself.

  1. <!DOCTYPE html>

  2. <html>

  3. <body>

  4. Hey you!

  5. </body>

  6. </html>

Let's go over this line by line!

To start, three of these lines contain the word "html". What the heck is that?!

HTML stands for HyperText Markup Language. Basically it's just a fancy markup language, or way of styling regular text with different properties.

Any time you've dealt with text you can change the color and size of, you've dealt with a type of rich markup text.

Originally way back when webpages were being created, they were dreamt up as just being documents that people could view. In the beginning there was never any intention for the big complicated and interactive pages we see nowadays. Web pages were originally meant to be a kind of online PDF viewer, if you want to think about it that way.

Because of this, there are lots of ways to make web pages and many of them may seem out of date. This can get tricky! You may never know what code is a really old pattern or a modern one just by looking at resources for help. Luckily, browsers are backwards compatible with old ways of doing things, but make sure you look at where you are getting examples from to make sure everything is up to date!

There are tons of ways to make websites!

Line 1: I won't say much about this line. Formally, what it is doing is telling the browser this is an HTML5 webpage. What does that mean for you right now? Not much at all, really. If you remove it from these examples your page should still function the same. Later on we can go over it, but for now please just realize it is proper to include it. I will always be honest with you and let you know there are things like this you will need to know later, but not now.

Before we go to the next line, let's talk tags! Tags are the main bulk of HTML webpages! They are wrapped in this little triangle shaped brackets (called chevrons) you get by holding shift and pressing comma/period on a standard keyboard. Typing a tag like this <tag> opens it, and then later you can type </tag> to close it. All the text inside the opening and closing of the tag belongs to the tag!

For example, the <b> tag makes things bold. If I type in my page code <b>cat</b> I will see cat when I view the webpage! Be sure to close your tags or everything else will be a part of them! So if you don't close a <b> tag, the rest of your page will end up bold. Very good for making a statement, but perhaps not the best for readability. 😂

<tag> Stuff goes inside until you close the tag with a slash! </tag>

Don't worry too much if you don't understand tags yet. You will have plenty of time to get used to them over the course of making web pages as you will use them tons. Just know that you open a tag, put a bunch of stuff inside of it, and then later close it.

Line 2: This is the html tag. Basically all this is doing is telling the browser that everything inside this tag until its closing tag is an HTML page. Nothing too fancy. It's mostly just for formality at this stage, like Line 1.

Line 3: This is the body tag. The wording is a little dated, but this just means that everything inside it is in the body of the page, meaning it will show on the screen. "But Nic," you may ask curiously, "doesn't this mean there are things not on the page you can put in the file??" Yes! Very much so! We will get to those a bit later! For now don't worry too much, but this is a tag you will need to include and it will become more second nature later on.

Line 4: What's this?? Our message! The example has "Hey you!" but you can put anything here, and maybe you should! Always feel free to explore to make things your own. Maybe put your name here. Maybe use the <b> tag how we talked about earlier, making sure to remember to close it. The choice is yours and the possibilities are endless, but definitely feel free to just make it the simple message if you so desire. Stay creative!

Line 5: We are close to the end! All this line is doing is closing the body tag. This just means our section of showing what is on the screen is over! Nothing more complicated than that.

Line 6: We've reached the conclusion! Much like Line 5, this is just closing the html tag that told the browser this was an HTML page. That's it!

We did it! I know this can be a ton to take in at once. We've learned a ton of new stuff and made sure to go over it all but taking it all in fully is really hard the first time. Don't feel bad if it takes a bit or you're still shaky at what you're reading. Feel free to slow down and mull things over and then move on to the next section when you're ready.