No tags yet.
Kids Playground - HTML 101
Hi Kids! The very first way I got myself into coding and web page building is by learning HTML (HyperText Markup Language). Don’t let the big name scare you. HTML is essentially the codes we need to put things onto the web. For example, you wrote a story and you want to put it on the internet. Knowing HTML is a very easy way to do that for you.
Let’s get started!
Step One – open up a text editor:
If you are in windows, go to the start button and type in “Notepad” in the search bar at the bottom of the menu.
If you are using a Mac, go to the search button, and type in “TextEdit.”
NOTE: If you are using "TextEdit," be sure to change the format of your text file to "Plain Text." To do this, go to "Format"and select "Make Plain Text."
Step Two – copy and paste in the following:
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>Hello world. This is my first web page.</body>
</html>
Step 3 – save the file as HelloWorld.html.
It is very important to save the file as .html. This will tell the computer that you want this file to become a webpage.
Step 4 – go to where you saved the file and open it!
See how it shows up on your browser like a real webpage? You have just made your first web page! Congratulations!
Repeat the exercise on top by replacing “Hello World” within the <title></title> and <body></body> with something else. Reopen the file and see how it changes!
We will introduce you to more HTML elements in our future blogs!
A bonus assignment we would like to give you this week is to check out some other HTML documents.
Where can you do this? Simply open any web site on your browser. Right click anywhere, and chose the command “View Source” or “View Page Source.”
Your browser will then open up the HTML source of that particular page.
While the codes may look long and complicated, you will notice that they all start similar to what you have done with different things filled in between.
As we learn more HTML elements, you will be able to build pages just like those and add more complicated presentation to your webpage as well.
Source credit: