No tags yet.
Parents Playground HTML 101
Hi Parents - Hopefully you had the chance to take a look at our previous post on Kids HTML 101. It was meant to be a simple exercise to show kids how to write a simple HTML code for "Hello World" and present it in a browser.
We hope you were able to prepare the HTML code with your kids, and now we will go through the details of the code to help you explain to the kids what each of the lines mean and how it impacts the way "Hello World" is displayed in the browser.
As you have noticed, HTML has a lot of "<" and ">." Anything happens within the brackets is meant to be part of the code that tells a browser what to do. To build any webpage you will need four primary tags: <html>, <head>, <title> and <body>. These are all container tags and must appear as pairs with a beginning and an ending (with the exception of the <!DOCTYPE html> discussed below).
Line 1 - <!DOCTYPE html> - this line is declaring to your browser (e.g. Chrome, Internet Explorer, Safari, or any other type of browsers) that the file it is going to read is an HTML file.
Line 2 and 7 - <html> .......</html>
It is important to note that other than the <!DOCTYPE html> tag, all other tags come in pairs. The <html> tag tells the browser to display the instructions in HTML. When you are done with your entire HTML code, you end the code with </html> to indicate to the browser that the HTML instruction has now ended.
Lines 3 and 5 - <head> ... </head>
The <head> tag contains meta information about the webpage, such as the title of the page, along with general information about the document, like the author, copyright, keywords and/or a description of what appears on the page. Anything included between the <head> and </head> tags provides info for search engines.
Line 4 - <title>... </title>
Title tags appears within the <head> tags to give the page a title. Below is an example of how our "Hello World" title appears in Internet Explorer:
Line 5 - </head>
We end our header with an end </head> tag.
Line 6 - <body> ... </body>
Anything that goes between the <body> start tag and </body> end tag is visible on the webpage. Just like the body of a paragraph, the body is where the content of the page is stored. In our Hello World example, it includes only text. In future posts, we will show you how to embed images, links, and other things you may want to include on a webpage. This can also be further enhanced with CSS coding.
Line 7 - </html>
This tells the browser we have finished our HTML code.
I worked with my daughter to change the title (the words between <title> and </title>) and the body (the words between <body> and </body>) of the content to show her the effects it has on how the webpage is displayed. She made up titles and stories she wants to post and share with her friends.
Hope you will find this post to be a fun exercise to show the kids how easy creating web contents can be!
Bonus - explore with your kids the HTML source codes of different web pages. This can be done by doing the following:
1. Go to any webpage in your browswer (for example Google.com)
2. Right click anywhere to open up the menu
3. Select "View Page Source"
Voilà, you should be able to see the HTML code for the page. Scan through the codes and you will see that the basic tags we have discussed above are there; there are just more complicated codes in between to help with presentation and also the functionality of the webpages (e.g. search and other scripts).
Have fun!