HTML – Chapter 1 | Creating a Website with Notepad | Hello World Page
Creating a website with notepad is easy-peasy! Let’s learn the simplest thing in the world: How to create a Hello World Page.
The best thing about HTML is that it lets you get on the Web Development bandwagon in a jiffy. For creating a website with notepad you don’t need anything, literally anything!
Ok two things that you gotta have are simply:
- Notepad
- Browser (Any)
The above things are already there in your computer. So no downloading of dispensable tools or software. No unwanted opening, closing or scouring of things to make it work. Literally zero hassle. Phew!
Step By Step Explanation for Creating a Website with Notepad
For creating a website with notepad I have decided to create a ladder of 10 steps that would literally take you there.
It is always a great idea to place everything in a folder. So every new project you create has its own abode. There you go with your first step:
Step 1: Create a folder and call it HTML. And by calling I mean Renaming. For a second there, you were talking to your computer, weren’t you?
Step 2: Open that folder. Right click on the blank area. Select New and then select Text Document. (It’s notepad, you can also open it through Win + R and typing notepad before pressing enter)
Step 3: Open it.
Language Across HTML
HTML is a markup language. Whatever that means, huh! Okay so I googled it. It says that there are some set of rules that define what’s written to make a computer and humans understand what we are talking about. That makes sense, naturally if we talk in our daily slang, the computer wouldn’t get, now would it?
There is a thing called tag which is nothing but this sign ‘<‘ ‘>’ between which elements are placed. It helps the language understand where we expect what to fall. For example:
<title>
The aforesaid will let your computer understand that you are expecting a title to be shown in the title.
Moving on:
Step 4: Open the created notepad document.
Annotations
Now we have to comprehend some basic things that always work across HTML. I hate to mug things up, but hey this is inevitable. You can’t make it work unless you are coming to terms with your computer. HTML wants you to follow their standard. So in we jump in their whirlpool of jargon.
To get a hang of tags across HTML, you need to establish the following:
What opens, always closes. What has closed must have been opened.
Here’s how a tag element opens:
<>
Here’s how a tag element closes:
</>
For instance, <title> and </title> are the opening and closing annotations for title. Whatever we place between the opening and closing ‘tags’ behave as per HTML regulations. Here it is the title.
Whatever we place in between opening and closing ‘elements’ too work as per HTML set rules.
That being said, to make your computer fathom that it isn’t just a piece of text that we are trying to run by it, the tag <html> is crucial to be included. So there goes the tag as part of our next step.
Writing in HTML’s language
Step 5: Start with typing <html> in the notepad. Remember whatever has been opened needs to be closed. Hence, follow it up with an </html> close tag. Make opening and closing elements a habit, that way you wouldn’t miss.
There are two major parts of a web page. They are namely:
- Head
- Body
Whoa! That’s like the human body!
The Head is where all the data about data, that is the meta data is stored. Well that makes sense. That’s what our brain does, doesn’t it?
On the other hand, body is all about the looks. To that I would say, very relatable! That web page screen where you get to see all the presentable data, that’s the body area.
So your hello world web page needs to have two elements inscribed.
Step 6: With the above logic add two more elements within their respective opening and closing tags namely: <head> and <body>.
What’s been opened gotta be closed, so our code would look something like this:
Step 7: There is a title element that helps in identifying the title of your web page. It has to be placed between the <head> elements.
So you give a personal title and it will show up as the title of your Hello World web page. Like here I am choosing “Demogorgon” as the title.
Step 8: Whatever you type in between <body> element will be shown on the visible white display of the page. I choose to write: “Hello World!”
That’s it. We are done. Phew!
Saving the file as HTML
Aren’t you stuck with a notepad staring at your soul? Well, you need to save it.
Step 9: Go to File > Save as…
A dialog box would pop up asking you to name it.
What’s in a name? Call it anything you like. I renamed mine Dracarys. Ooh! Yeah! This nerd’s a big nerd.
Note: Save it by adding the extension .html. I am entering “dracarys.html” and then clicking on save.
The moment you save it you will find a dracarys file lingering on your html folder. It’s extension might be showing as .html, meaning that it can opened with any browser.
What are you waiting for?
Step 10: Double click! or open it in your preferred browser.
Voila! You have created your first website with Notepad.
Notice how “Demogorgon”, the thing that you had placed between the title tags, shows up at the top in title. The body where you had placed “Hello World!” comes with a beaming smile at the display area.
The Apparent Question
Now that you know about creating a website with notepad I know what you are thinking. Why doesn’t it look like the one that we see on internet? That’s because there are still plenty of things left to do. The topic is huge and we have just aced its baby steps.
We have started with the most primal thing, and the best thing is – You have got a hang of it, and that’s important!
Repeat the procedure and cook me another html file without referring anything up.
Congratulations! You have just learned how to create a website with notepad. Go celebrate! Take a day off! Go punch your friend! Whatevs!
Short and sweet about HTML. Very Nice to know.
Thank You Maruthi. Subscribe to the website and get such lovely posts delivered via mail. 🙂